JS事件委托（什么情况下使⽤事件委托）
1. 什么是事件委托
事件委托：把事情委托给别⼈，代为处理。
事件委托也称为事件代理，在 jQuery ⾥⾯称为事件委派。
理解：说⽩了就是，不给⼦元素注册事件，给⽗元素注册事件，把处理代码在⽗元素的事件中执⾏。
js事件中的委托：
<ul>
<li>知否知否，应该有弹框在⼿</li>
<li>知否知否，应该有弹框在⼿</li>
<li>知否知否，应该有弹框在⼿</li>
<li>知否知否，应该有弹框在⼿</li>
<li>知否知否，应该有弹框在⼿</li>
</ul>
点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是⾮常⾟苦的，⽽且访问 DOM 的次数越多，这就会延长整个页⾯的交互就绪时间，那怎么解决呢？
2. 事件委托的原理
不是每个⼦节点单独设置事件，⽽是事件设置在其⽗节点上，然后利⽤冒泡原理影响设置每个⼦节点。
以上案例：给 ul 注册点击事件，然后利⽤事件对象的 target 来到当前点击的 li，因为点击 li，事件会冒泡到 ul 上， ul 有注册事件，就会触发事件。
3. 事件委托的作⽤
我们只操作了⼀次 DOM ，提⾼了程序的性能。
动态新创建的⼦元素，也拥有事件。
<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 这个可以得到我们点击的对象
jquery是什么有什么作用e.target.style.backgroundColor ='pink';
})
</script>
4. 总结
事件委托，⼦元素委托⽗元素
什么情况下⽤事件委托：当要给⼀组元素添加相同事件时，可以直接添加给⽗亲
事件委托原理：事件冒泡，当触发⼦元素的事件时，通过冒泡，事件传递给⽗亲，⽗亲⾝上绑定有事件处理程序，进⽽触发

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。