DOM事件委托

事件委托是什么？

事件委托就是利用冒泡机制，将事件添加在目标元素的父元素或祖辈元素上，触发执行效果。也就是就是监听目标元素的祖先。

代码示例：

<body>
    <div id="div">
        <button id="btn">点击</button>
    </div>

    <script>
        window.onload = function () {
            let btn = document.querySelector("#btn")
            let div = document.querySelector("#div")

            //在btn的父元素div上添加监听函数
            div.addEventListener("click", function (e) {
                console.log("btn被点击了")
            })
        }
    </script>
</body>

运行结果：点击btn触发了其父元素div的事件。

事件委托.png

事件委托的优点

1. 节约内存空间，提高JS性能

例：在 ul 上创建 100 个 li标签，点击每个 <li>都要弹框显示该 <li>的 value。

传统写法：在每个 <li>上都绑定 click 事件，并触发 alert 事件。（需要监听100个<li>的事件，占据大量内存）。
事件委托：在 <ul> 上绑定 click 事件，当触发 onclick 事件后，判断是不是<li>标签，如果是，则 alert <li>标签的值。（只需要监听1个<ul>的事件，大大节约了内存空间）。

2. 可以动态添加 DOM 元素，不需要因为元素的变动而修改事件绑定。

例：监听一个目前不存在的DOM元素（以后可能存在）。

解：可以监听该DOM元素的祖先（事件委托），点击时再判断是不是我要监听的元素即可。

事件委托注意事项

事件委托绑定的元素，最好是被监听元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。

因为事件冒泡的过程也要耗时，越接近顶层，事件的「事件传播链」就越长，也就越耗时。