事件代理（事件委托）

最新推荐文章于 2024-06-10 17:00:16 发布

提拉米苏爱拿铁

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量2k

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_50789696/article/details/129196257

版权

1 概念

事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

补充知识

事件流：捕获阶段-目标阶段-冒泡阶段
阻止事件冒泡 event.stopPropagation()

2 优点

1) 减小内存消耗

使用事件委托可以大量节省内存，减少事件的定义，例如使用事件委托的方式将点击事件绑定到 ul 标签上，就可以实现监听所有 li 标签，简洁、高效。

2) 动态绑定事件

在网页中，有时我们需要动态增加或移除页面中的元素，使用事件委托不需要再为新增的元素绑定事件，也不需要为删除的元素解绑事件。

3 例子

事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
event.target 返回触发事件的DOM对象
排他思想：先排除其他人，再设置自己的样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // e.target 这个可以得到我们点击的对象
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].style.backgroundColor = '';
            }
            e.target.style.backgroundColor = 'pink';


        })
    </script>
</body>

</html>