js事件委托（代理，委派）

66 阅读 0 评论 44 点赞

我是靠谱客的博主笑点低小白菜，最近开发中收集的这篇文章主要介绍js事件委托（代理，委派），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

事件委托：

事件委托也成为事件代理，在jquery里面称为事件委派

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理设置每个子节点

案例：给ul设置点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

当代码中有多个li的时候，我们不需要给每个li创建点击事件，我们只需要给父元素一个点击事件

<ul>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
<li>知否知否</li>
</ul>
<script>
var ul = document.querySelector('ul')
ul.addEventListener('click',function(e){
e.target.style.backgroundColor='pink'
})
</script>