概述
事件委托的原理 :
不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上 ,然后利用冒泡原理影响设置每一个子节点
事件委托的好处:减轻服务器压力.提高事件处理速度,减少内存的占用,减少复杂的事件处理的添加.jQuery可以动态的给后代添加事件(未来的节点也能添加)
js写法:
<body>
<ul>
<li>点我会变1</li>
<li>点我会变2</li>
<li>点我会变3</li>
<li>点我会变4</li>
<li>点我会变5</li>
</ul>
<script>
//事件委托的原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每一个子节点
//事件委托的原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每一个子节点
//事件委托的原理:不是每个子节点都单独设置事件监听器,而是将事件监听器设置在父节点上,然后利用事件冒泡原理来影响每个子节点
var ul = document.querySelector('ul');
// console.log(ul);
var li = document.querySelectorAll('li');
ul.addEventListener('click', function (e) {
for (var i = 0; i < li.length; i++) {
li[i].style.backgroundColor = '';
// ul.children[i].style.backgroundColor = '';
}
//e.target可以获得点击的是哪个节点
if (e.target != this) { //如果点击的不是父节点自身
e.target.style.backgroundColor = 'red';
}
console.log(e.target);
})
</script>
</body>
效果:点击小li会触发背景颜色变化,但是有个不好的点就是如果点到ul的话,会使ul和所有li都变红,因此我们在这里进行了一个判断if(e.target!=this),如果点击的不是ul自身,才能触发事件;
jQuery:
jQuery的事件委派是使用on,
$("ul").on("click", "li", function () {
$(this).css("background", "red");
$(this).siblings().css("background", "");
})
三行代码解决问题,利用了时间委派和排他思想,由此可见jQuery实现了代码更简洁,功能更强大的操作
jQuery事件委派的优点是未来生成的子元素也会被添加事件
最后
以上就是瘦瘦万宝路为你收集整理的原生JS\jQuery事件委托(委派)的全部内容，希望文章能够帮你解决原生JS\jQuery事件委托(委派)所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复