事件委托
通俗地来讲,就是把一个元素响应事件的函数委托到另一个元素。
我们通常想在ul
标签里添加大量的事件,例如经常使用的点击事件。我们通常的写法,是为每个<a>
都绑定类似onclick
之类的事件监听。或者是使用for循环给连续的标签添加事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="UL">
<li><a href="javascript:;">我是a1标签</a></li>
<li><a href="javascript:;">我是a2标签</a></li>
<li><a href="javascript:;">我是a3标签</a></li>
</ul>
<script>
var parentNode = document.getElementById("UL");
var aNodes = document.getElementsByTagName("a");
for(var i=0, l = aNodes.length; i < l; i++){
aNodes[i].onclick = function() {
console.log(this);
}
}
</script>
</body>
</html>
但是,上面的做法过于消耗内存和性能。我们希望,只绑定一次事件,即可应用到多个元素上,即使元素是后来添加的。
因此,比较好的方法就是把这个点击事件绑定到他的父层,也就是 ul
上,然后在执行事件函数的时候再去匹配判断目标元素。也即是事件委托。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="UL">
<li><a href="javascript:;">我是a1标签</a></li>
<li><a href="javascript:;">我是a2标签</a></li>
<li><a href="javascript:;">我是a3标签</a></li>
</ul>
<script>
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 的单击相应函数');
}
}
</script>
</body>
</html>
上方代码,为父节点注册 click 事件,当子节点被点击的时候,click事件会从子节点开始向父节点冒泡。父节点捕获到事件之后,开始执行方法体里的内容:通过判断 event.target 拿到了被点击的子节点<a>
。从而可以获取到相应的信息,并作处理。
事件是在冒泡阶段触发(子元素向父元素传递事件)。而父节点注册了事件函数,子节点没有注册事件函数,此时,会在父节点中执行函数体里的代码。
总结:事件委托是利用了冒泡机制,减少了事件绑定的次数,减少内存消耗,提高性能。