JS事件委托

最新推荐文章于 2023-06-27 17:18:45 发布

劭兮劭兮

最新推荐文章于 2023-06-27 17:18:45 发布

阅读量135

点赞数 1

分类专栏： JS常用效果实现笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44694201/article/details/110550418

版权

笔记同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JS常用效果实现

4 篇文章 0 订阅

订阅专栏

JS中事件委托

在编写JS代码过程中，我们有时候会在增加事件监听后，在代码中增加button等属性，有时候把增加button语句写在事件监听代码块的后面，增加的button按钮不会被监听。
今天，就来一起看看事件委托功能，即将事件监听增加到其上一级结点上。

代码实现

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM事件委托</title>

</head>

<body>

    <div id="container">
        <button>按钮A</button>
        <button>按钮B</button>
    </div>

    <!-- 习惯：把script代码块写到body的最后，因为script代码普遍比较大，写到后面不会影响前面的代码执行 -->
    <script>
        var buttons = document.querySelectorAll("button");

        // 直接写事件
        // buttons.forEach(function(button) {
        //     window.alert("Hi!");
        // });


        // 如果不利用 “事件委托” ，后添加的按钮在 监听事件 的后面，不会被事件监听
        // buttons.forEach(function(button) {
        //     button.addEventListener("click", function(e) {
        //         window.alert("Hi!");
        //     });
        // });

        // var newButton = document.createElement("button");
        // newButton.textContent = "按钮C";
        // container.appendChild(newButton);


        // 用 “事件委托” ，后添加的 按钮 仍然会被监听
        var container = document.querySelector("#container");
        container.addEventListener("click", function(e) {
            window.alert("Hi!");
        });

        var newButton = document.createElement("button");
        newButton.textContent = "按钮C";
        container.appendChild(newButton);
    </script>

</body>

</html>