forked from theluyuan/Web
66 lines
2.7 KiB
Markdown
66 lines
2.7 KiB
Markdown
|
|
|||
|
|
## 事件委托
|
|||
|
|
|
|||
|
|
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。
|
|||
|
|
|
|||
|
|
比如说有一个列表 ul，列表之中有大量的列表项 li：
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<ul id="parent-list">
|
|||
|
|
<li id="li-1">Item 1</li>
|
|||
|
|
<li id="li-2">Item 2</li>
|
|||
|
|
<li id="li-3">Item 3</li>
|
|||
|
|
<li id="li-4">Item 4</li>
|
|||
|
|
<li id="li-5">Item 5</li>
|
|||
|
|
<li id="li-6">Item 6</li>
|
|||
|
|
</ul>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当我们的鼠标移到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)
|
|||
|
|
|