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

82 lines
3.7 KiB
Markdown
Raw Normal View History

2019-11-12 16:56:33 +08:00
## 事件委托
事件委托通俗地来讲就是把一个元素响应事件click、keydown......)的函数委托到另一个元素。
2019-11-12 20:21:25 +08:00
比如说有一个列表 ul列表之中有大量的列表项 `<a>`标签:
2019-11-12 16:56:33 +08:00
```html
<ul id="parent-list">
2019-11-12 20:21:25 +08:00
<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>
2019-11-12 16:56:33 +08:00
</ul>
```
2019-11-12 20:21:25 +08:00
当我们的鼠标移到`<a>`标签上的时候,需要获取此`<a>`的相关信息并飘出悬浮窗以显示详细信息,或者当某个`<a>`被点击的时候需要触发相应的处理事件。我们通常的写法,是为每个`<a>`都绑定类似onMouseOver或者onClick之类的事件监听
2019-11-12 16:56:33 +08:00
```javascript
window.onload = function(){
2019-11-12 20:21:25 +08:00
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 的单击相应函数');
}
2019-11-12 16:56:33 +08:00
}
}
```
2019-11-12 20:21:25 +08:00
但是,上面的做法过于消耗内存和性能。**我们希望,只绑定一次事件,即可应用到多个元素上**,即使元素是后来添加的。
2019-11-12 16:56:33 +08:00
2019-11-12 20:49:09 +08:00
因此,比较好的方法就是把这个点击事件绑定到他的父层,也就是 `ul` 上,然后在执行事件函数的时候再去匹配判断目标元素。如下:
2019-11-12 16:56:33 +08:00
2019-11-12 20:21:25 +08:00
```html
<!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>
2019-11-12 16:56:33 +08:00
```
2019-11-12 20:49:09 +08:00
上方代码,为父节点注册 click 事件当子节点被点击的时候click事件会从子节点开始**向父节点冒泡**。**父节点捕获到事件**之后,开始执行方法体里的内容:通过判断 event.target 拿到了被点击的子节点`<a>`。从而可以获取到相应的信息,并作处理。
2019-11-12 16:56:33 +08:00
2019-11-12 20:21:25 +08:00
换而言之参数为false说明事件是在冒泡阶段触发子元素向父元素传递事件。而父节点注册了事件函数子节点没有注册事件函数此时会在父节点中执行函数体里的代码。
2019-11-12 16:56:33 +08:00
2019-11-12 20:21:25 +08:00
**总结**:事件委托是利用了冒泡机制,减少了事件绑定的次数,减少内存消耗,提高性能。
2019-11-12 16:56:33 +08:00
事件委托的参考链接:
- [荐 | JavaScript事件代理和委托Delegation](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html)
- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)