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

最新推荐文章于 2024-07-30 22:36:34 发布

mewgulfszd！

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量129

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/CLhen/article/details/125542363

版权

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

<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>