事件委派

yang 发布于 2023-5-30 18:55 阅读：436 JS基础阶段
<!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>Document</title>
        <style>
            #container div {
                border: 1px solid #000;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <h1>我只是个打酱油的</h1>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <button>点我啊</button>

        <script>
            const btnNode = document.querySelector("button");
            const container = document.querySelector("#container");
            // 给按钮绑定事件，点击（用户交互）产生新节点
            btnNode.addEventListener("click", function () {
                const newDiv = document.createElement("div");
                newDiv.textContent = "新节点";
                container.append(newDiv);
            });

            /*
            注意：在页面加载时遍历绑定事件，给交互产生的节点绑定不上事件！！！
            const divNodes = document.querySelectorAll("#container div");
            console.log(divNodes);
            divNodes.forEach(function (v) {
                v.addEventListener("click", function () {
                    console.log("绑定的事件");
                });
            });
            */

            // 2.什么是事件委派？
            // 2-1.将事件绑定在页面加载时就存在的公共父节点上
            // 2-2.利用事件冒泡机制，事件从底层一层层向上传播
            // 2-3.通过事件对象反查事件源，再根据事件源的nodeName等属性进行判断
            container.addEventListener("click", function (event) {
                // console.log(event.target);
                // console.dir(event.target);
                // 通过事件对象反查事件源，再根据事件源的nodeName进行判断
                if (event.target.nodeName === "DIV") {
                    console.log("绑定的事件");
                }
            });
        </script>
    </body>
</html>
事件委派
扫描二维码，在手机上阅读