事件委托

事件委托

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

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

• 超链接一
• 超链接二
• 超链接三

当我们的鼠标移到标签上的时候，需要获取此的相关信息并飘出悬浮窗以显示详细信息，或者当某个被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个都绑定类似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 上，然后在执行事件函数的时候再去匹配判断目标元素。如下：

• 我是p元素

• 超链接一
• 超链接二
• 超链接三

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

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

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

事件委托的参考链接：

• [荐 |
  JavaScript事件代理和委托（Delegation）]{.ul}

• [JavaScript
  事件委托详解]{.ul}