吃惊夜夜

# 事件委托

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
      window.onload = function () {
        // 获取父节点，并为它绑定click单击事件。 false 表示事件在冒泡阶段触发（默认）
        document.getElementById("parent-list").addEventListener(
          "click",
          function (event) {
            event = event || window.event;

            // e.target 表示：触发事件的对象
            //如果触发事件的对象是我们期望的元素，则执行否则不执行
            if (event.target && event.target.className == "link") {
              // 或者写成 if (event.target && event.target.nodeName.toUpperCase() == 'A') {
              console.log("我是ul的单击响应函数");
            }
          },
          false
        );
      };
    </script>
  </head>
  <body>
    <ul id="parent-list" style="background-color: #bfa;">
      <li>
        <p>我是p元素</p>
      </li>
      <li><a href="javascript:;" class="link">超链接一</a></li>
      <li><a href="javascript:;" class="link">超链接二</a></li>
      <li><a href="javascript:;" class="link">超链接三</a></li>
    </ul>
  </body>
</html>

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

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

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

事件委托的参考链接：

← 42-键盘事件 →