事件委托，利用冒泡影响父节点的子节点。

最新推荐文章于 2025-11-28 04:56:28 发布

原创最新推荐文章于 2025-11-28 04:56:28 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

本文介绍了事件委托的原理，即通过在父元素上设置监听器，利用事件冒泡机制处理所有子节点的点击事件，避免为每个子节点单独设置事件处理器，提升性能和代码简洁度。

事件委托的原理：不是每个子节点单独设置监听事件，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            alert('哎呀哎呀，你点我了。')
            for(var i=0;i<ul.children.length;i++){
                ul.children[i].style.backgroundColor=null
            }
            e.target.style.backgroundColor = '#ffcc00'
        })
    </script>
</body>