Web/04-JavaScript基础/29-事件委托.md

66 lines
2.7 KiB
Markdown
Raw Normal View History

2019-11-12 16:56:33 +08:00
## 事件委托
事件委托通俗地来讲就是把一个元素响应事件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)