js-事件冒泡、事件委托

DOM事件流模型

三阶段

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段。

独特性质

DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。

一：什么是事件委托？

事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

二：为什么要用事件委托？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多
，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；
如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢
，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，自然性能就会更好。

三：例子
我们以下面的HTML代码为例，用事件委托的方式实现当鼠标单击某个li元素的时候，li元素的背景变成红色。
<ul id = "lists">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
JavaScript代码：
var lists = document.getElementById("lists");
lists.addEventListener("click",function(event){

   var target = event.target;
   //防止父元素ul也触发事件
   if(target.nodeName == "LI"){
   target.style.backgroundColor = "red";
   }
})

jQuery中的事件委托方式(liv、bind、delegate、on推荐jq1.7以后)
$(function(){
   $("#lists").on("li","click",function(event){
       var target = $(event.target);
       target.css("background-color","red");
   })
})

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

js-事件冒泡、事件委托

猜你喜欢