javascript-事件委托（代理、委派）

最新推荐文章于 2024-07-11 17:05:07 发布

零OO

最新推荐文章于 2024-07-11 17:05:07 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/qq_39111074/article/details/120510798

版权

前端专栏收录该内容

222 篇文章 8 订阅

订阅专栏

本文详细介绍了事件委托的概念，通过一个代码示例展示了如何利用事件冒泡实现事件委托，以此减少代码量并提高性能。在示例中，父元素ul被绑定点击事件，当点击其内的li子元素时，事件会冒泡到父元素，从而改变触发事件的元素（即li）的背景色。这种方法在处理大量子元素的交互时非常有效。

摘要由CSDN通过智能技术生成

事件委托原理：事件冒泡

使用场景及方法：

如果有一个元素，里面包含了很多个子元素，触发每个子元素都要执行一个事件。
以前是给每个子元素绑定事件，但使用事件委托后，只用给父元素绑定事件就行，子元素不用绑定了- - -父元素绑定事件，事件处理程序中设置触发事件的元素发生改变（e.target触发事件）

代码示例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        ul {
            width: 300px;
            height: 300px;
            padding-top: 30px;
            background-color: pink;
        }
        
        li {
            margin: 5px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            e.target.style.backgroundColor = 'green';
        }, true);
    </script>
</body>

</html>

页面效果：

事件委托.gif

给父元素ul绑定了事件—事件处理程序：触发事件的元素背景色改变，没有给子元素小li绑定事件
点击小li，元素会进行事件冒泡，从自身向上，小li自身没有绑定事件，但是父元素ul有绑定事件，触发了父元素ul绑定事件，所以没有给小li们绑定点击变色事件，点击小li后也会变色

零OO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript-事件委托（代理、委派）

事件委托原理：事件冒泡使用场景及方法：如果有一个元素，里面包含了很多个子元素，触发每个子元素都要执行一个事件。以前是给每个子元素绑定事件，但使用事件委托后，只用给父元素绑定事件就行，子元素不用绑定了- - -父元素绑定事件，事件处理程序中设置触发事件的元素发生改变（e.target触发事件）代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫

专栏目录