事件代理简述

事件概述

在 JS 程序设计中，当文档、浏览器、元素与之相关的对象发生交互活动时，Web 浏览器就会产生事件
- 事件类型（event type）：指用来说明发生了什么类型事件的字符串，如 mouseenter、mouseleave等
- 事件目标（event target）：指发生的事件与之相关的对象，最常见的如Window、Document和Element
- 事件处理程序（event handler）或事件监听程序（event listener）：指处理或响应事件的函数
- 事件对象（event object）：指与特定事件相关且包含有关该事件详细信息的对象，所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 target 属性
- 事件传播（event propagation）：是浏览器决定哪个对象触发其事件处理程序的过程，有事件冒泡（bubble）和事件捕获（capturing）两种形式

事件传播

IE 事件冒泡：指从事件目标节点逐级的往上层节点传递，冒泡到 document 对象
Netscape 事件捕获：从 document 对象到目标节点，例如当点击 <div> 元素时，按照 document - <html> - <body> - <div> 的顺序传递
DOM2 (W3C标准)事件传播的三个阶段
- 捕获阶段，事件从顶层节点逐级往下层传递，接着到达目标节点
- 处于目标阶段
- 然后事件又从目标节点逐级往上层节点传递，这部分叫做事件冒泡

事件代理

按《JavaScript高级程序设计》所讲，事件委托利用了事件冒泡，只指定一个事件处理程序就可以管理某一类型的所有事件。通过减少 DOM 访问次数，达到提高内存利用率，性能提升的目的。

<ul id="job">
  <li>牙医</li>
  <li>律师</li>
  <li>警察</li>
</ul>

<script>
//for循环遍历li，增加了DOM访问次数
window.onload = function(){
  var aLi = document.querySelectorAll('#job li');
  for(var i=0; i<aLi.length; i++){
    aLi[i].onclick = function(e){
      if(e.target.tagName.toLowerCase() == 'li'){
        console.log(e.target.innerText);
      }
    }
  }
}

//绑定父级元素，利用冒泡进行事件代理
window.onload = function(){
  var ulNode = document.getElementById("job");
  ulNode.onclick = function(e){
    if(e.target.tagName.toLowerCase() == 'li'){
      console.log(e.target.innerText);
    }
  }
}
</script>

无事件代理时，对新增的子元素处理时要调用先前函数；而事件代理对新增的子元素同样会进行处理

事件代理简述

事件概述

事件传播

事件代理

推荐阅读更多精彩内容