JavaScript事件代理和委托（Delegation）
JavaScript事件代理
首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
一：假设有一个 UL 的父节点，包含了很多个 Li 的子节点：
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>二： 如果这个UL中的Li子元素会频繁地添加或者删除，我们就需要在每次添加Li的时候都调用这个addListeners4Li方法来为每个Li节点添加事件处理函数。这就添加的复杂度和出错的可能性。更简单的方法是使用事件代理机制，当事件被抛到更上层的父节点的时候，我们通过检查事件的目标对象（target）来判断并获取事件源Li。下面的代码可以完成我们想要的效果
//事件代理
var ulNode=document.getElementById('parent-list');//父亲节点对象
ulNode.addEventListener('click', function(event){ //event事件对象
var target=event.target || event.srcElement; //事件目标
if (!!target && target.nodeName.toUpperCase()==='LI') {
// statement
console.log('target'+target+target.innerHTML);
}
});//默认为事件冒泡，布尔值false三：为父节点添加一个click事件，当子节点被点击的时候，click事件会从子节点开始向上冒泡。父节点捕获到事件之后，通过判断e.target.nodeName来判断是否为我们需要处理的节点。并且通过e.target拿到了被点击的Li节点。从而可以获取到相应的信息，并作处理。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-11-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录