DOM文档事件中的事件委派

Hevenn

于 2023-02-03 10:51:32 发布

阅读量88

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Hevenn/article/details/128862245

版权

事件委派是一种在DOM文档中提高性能的技术，通过将事件绑定到父元素而不是每个子元素，利用事件冒泡机制来处理多个子元素的事件。这种方法减少了事件绑定的次数，当有大量动态添加或删除的元素时尤其有效。示例代码展示了如何为<ul>元素绑定点击事件，以响应所有类名为link的<a>标签点击。

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

DOM文档事件中的事件委派

事件委派

事件委派

指通过只绑定一次事件，即可应用到多个的元素上，事件的委派，是指将事件统一绑定给元素的共同的父亲元素，这样当后代元素上的事件触发时，会一直冒泡到父亲元素，从而通过父元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul id="bind">
    <li><a href="javascript:;" class="link">传输1</a></li>
    <li><a href="javascript:;" class="link">传输2</a></li>
    <li><a href="javascript:;" class="link">传输3</a></li>
</ul>
<script>
    let bind = document.getElementById("bind");
    // 为ul绑定一个单击响应函数
    bind.onclick = function (event) {
        event = event || window.event;
        // 如果触发事件的对象是我们期望的元素，则执行，否则不执行
        if (event.target.className == "link") {
            console.log("我是ul的单击响应函数");
        }
    };
</script>
</body>
</html>