原生JS\jQuery事件委托(委派)

最新推荐文章于 2025-03-25 21:42:30 发布

原创最新推荐文章于 2025-03-25 21:42:30 发布 · 372 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #jquery

本文深入解析事件委托原理，展示如何通过在父节点设置监听器利用事件冒泡影响子节点，减轻服务器负担，提升事件处理效率。附带JS与jQuery实例代码，演示事件委托的实现与优势。

事件委托的原理 :
不是每个子节点单独设置事件监听器,而是事件监听器设置在父节点上 ,然后利用冒泡原理影响设置每一个子节点
事件委托的好处:减轻服务器压力.提高事件处理速度,减少内存的占用,减少复杂的事件处理的添加.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", "");
        })