前端DOM Event 对象

vuejs前端开发pdf  javaweb前端开发课程 keras.js前端开发

html 代码

<ul id=”demo_ul”>
</ul>
<script>
    var ul = document.getElementById(“demo_ul”);
    ul.addEventListener(“click”, function (event) {
        console.log(event);
        console.log(event.path)
    });
    ul.innerHTML = “<li id=’demo_li_1′>第一个li</li><li id=’demo_li_2′>第二个li</li><li id=’demo_li_3′>第三个li</li>”;
</script>

查看事件中event对象后发现里面有很多的属性,以前都没没有注意这些属性的作用,没想到这个event对象的功能比我预想中的还要强大;

在这里我也不粘贴复制别的东西了,我就把w3school Event 对象的属性的列表贴出来吧http://www.w3school.com.cn/jsref/dom_obj_event.asp:
这个对Event 对象的一些属性解释的比较易懂的,还有一些案例http://ziren.org/js/js-event-properties-and-methods.html

恩,我今天在补充一点,关于上面说的案例其实就是事件代理和事件委托,为了方便大家不用去查找相关资料,我在这里就简单的总结一下:
所谓的事件委托其实就是利用了事件冒泡的原理来实现的,在这里事件的冒泡我也简单讲一下,
事件冒泡,就是事件从最深的节点开始,然后逐步向上传播事件,就拿上面的例子来说吧,我们在Li上触发了一个点击事件,那么这个事件就会一层一层往上执行,直到最顶层。执行顺序a>li>ul>div>body>html。所以利用这个冒泡的机制我们只需要给Ul添加点击事件,当里面的Li被点击的时候,就会触发我们给Ul添加的点击事件;那么这就是事件委托,委托它们父级代为执行事件。

恩,使用这个一个高大上的方法肯定是由他的好处的:一般来说我们要给一个元素添加事件,可以直接绑定。如果像上面一样同事有好多元素需要添加事件,大多数都是利用遍历元素在逐个的(PS:恩,反正我都是这么干的!!),但是如果元素的成百上千个,那么问题就来了。在JavaScript中,添加到页面上的事件处理程序数量是直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间;如果我们利用事件的委托那么与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;

好吧,并不是所有的事件都时候用来委托的,如下:
适合用事件委托的事件:click,mousedown,mouseup,keydown,keyup,keypress。
mouseover和mouseout虽然也有事件冒泡,但是处理它们的时候需要特别的注意,因为需要经常计算它们的位置,处理起来不太容易。
不适合的就有很多了,举个例子,mousemove,每次都要计算它的位置,非常不好把控,还有就是本身就没用冒泡的特性,自然就不能用事件委托了。

java前端android开发 前端开发中最常用到的js java前端后台分离开发详解

» 本文来自:前端开发者 » 《前端DOM Event 对象》
» 本文链接地址:https://www.rokub.com/5754.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!