41-事件委托

事件委托

事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素。

比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：

  1. <ul id="parent-list">
  2.     <li><a href="javascript:;" class="my_link">超链接一</a></li>
  3.     <li><a href="javascript:;" class="my_link">超链接二</a></li>
  4.     <li><a href="javascript:;" class="my_link">超链接三</a></li>
  5. </ul>

当我们的鼠标移到<a>标签上的时候，需要获取此<a>的相关信息并飘出悬浮窗以显示详细信息，或者当某个<a>被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个<a>都绑定类似onMouseOver或者onClick之类的事件监听：

  1.     window.onload = function(){
  2.         var parentNode = document.getElementById("parent-list");
  3.         var aNodes = parentNode.getElementByTagName("a");
  4.         for(var i=0, l = aNodes.length; i < l; i++){
  6.             aNodes[i].onclick = function() {
  7.                 console.log('我是超链接 a 的单击相应函数');
  8.             }
  9.         }
  10.     }

但是，上面的做法过于消耗内存和性能。我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后来添加的。

因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：

  1.     <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <script type="text/javascript">
  7.             window.onload = function() {
  9.                 // 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
  10.                 document.getElementById('parent-list').addEventListener('click', function(event) {
  11.                     event = event || window.event;
  13.                     // e.target 表示：触发事件的对象
  14.                     //如果触发事件的对象是我们期望的元素，则执行否则不执行
  15.                     if (event.target && event.target.className == 'link') {
  16.                     // 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
  17.                         console.log('我是ul的单击响应函数');
  18.                     }
  19.                 }, false);
  20.             };
  21.         </script>
  22.     </head>
  23.     <body>
  24.         <ul id="parent-list" style="background-color: #bfa;">
  25.             <li>
  26.                 <p>我是p元素</p>
  27.             </li>
  28.             <li><a href="javascript:;" class="link">超链接一</a></li>
  29.             <li><a href="javascript:;" class="link">超链接二</a></li>
  30.             <li><a href="javascript:;" class="link">超链接三</a></li>
  31.         </ul>
  32.     </body>

上方代码，为父节点注册 click 事件，当子节点被点击的时候，click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后，开始执行方法体里的内容：通过判断 event.target 拿到了被点击的子节点<a>。从而可以获取到相应的信息，并作处理。

换而言之，参数为false，说明事件是在冒泡阶段触发（子元素向父元素传递事件）。而父节点注册了事件函数，子节点没有注册事件函数，此时，会在父节点中执行函数体里的代码。

总结：事件委托是利用了冒泡机制，减少了事件绑定的次数，减少内存消耗，提高性能。

事件委托的参考链接：

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

52-事件委托 - 图1