爱站程序员基地事件委托的原理 :
不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上 ,然后利用冒泡原理影响设置每一个子节点
事件委托的好处:减轻服务器压力.提高事件处理速度,减少内存的占用,减少复杂的事件处理的添加.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事件委派的优点是未来生成的子元素也会被添加事件
