## 事件委托 事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素。 比如说有一个列表 ul,列表之中有大量的列表项 li: ```html ``` 当我们的鼠标移到Li上的时候,需要获取此Li的相关信息并飘出悬浮窗以显示详细信息,或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法,是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听: ```javascript //每个 li 中做的事情 function addListeners4Li(liNode){ liNode.onclick = function clickHandler(){...}; liNode.onmouseover = function mouseOverHandler(){...} } window.onload = function(){ var ulNode = document.getElementById("parent-list"); var liNodes = ulNode.getElementByTagName("Li"); for(var i=0, l = liNodes.length; i < l; i++){ addListeners4Li(liNodes[i]); } } ``` 但是,上面的做法会消耗内存和性能。 因此,比较好的方法就是把这个点击事件绑定到他的父层,也就是 `ul` 上,然后在执行事件的时候再去匹配判断目标元素。如下: ```javascript // 获取父节点,并为它注册click事件。 false 表示事件在冒泡阶段触发(默认) document.getElementById("parent-list").addEventListener("click", function (e) { // event.target 代表的是子元素。toUpperCase()方法 指的是转换为大写字母并返回 if (e.target && e.target.nodeName.toUpperCase() == "LI") { // 真正的处理过程在这里 console.log("List item ", e.target.id, " was clicked!"); } }, false); ``` 上方代码,为父节点注册click事件,当子节点被点击的时候,click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后,开始执行方法体里的内容:通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息,并作处理。 换而言之,事件是在父节点上注册的,参数为false,说明事件是在冒泡阶段触发(往上传递),那就只有父节点能拿到事件,子节点是不可能拿到事件的。 所以事件委托可以减少大量的内存消耗,提高效率。 事件委托的参考链接: - [荐 | JavaScript事件代理和委托(Delegation)](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html) - [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)