JS的事件委托

最新推荐文章于 2025-05-05 00:30:00 发布

转载最新推荐文章于 2025-05-05 00:30:00 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huzhuhua/p/10983680.html

本文深入解析JS事件委托的概念，探讨其工作原理与优势，通过对比传统事件监听方式，阐述事件委托如何提高代码性能，尤其在处理大量动态生成DOM元素时的表现。并提供了具体的代码示例，展示事件委托在实际场景中的应用。

什么是js事件委托，首先从词语上理解。事件：js的事件有一大堆，比如mouseup、mouseenter和click等等事件。

委托：把事情托付给别人或别的机构办理。

所以JS事件委托算是以冒泡的原理来做的。

事件委托的好处：

事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。

使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。

什么时候用事件委托：

1：当子元素有很多，需要对子元素的时间进行监听的时候；

2：动态生成DOM的时候；

下面的代码1:

    <ul id="ul">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        window.onload = () => {
            let oUl = document.getElementById("ul");
            let oLi = oUl.getElementsByTagName("li");
            for (let index = 0; index < oLi.length; index++) {
                oLi[index].onclick = () => {
                    console.log(index)
                }
            }
        }
        </script>

正常是这样操作li，但是如果li过多呢。每次都是for循环就是耗性能了。所以可以用事件委托来。就是获取当时点击时的对象判断再操作。

代码2

    <ul id="ul">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        window.onload = () => {
            let oUl = document.getElementById("ul");
            // let oLi = oUl.getElementsByTagName("li");
            // for (let index = 0; index < oLi.length; index++) {
            //     oLi[index].onclick = () => {
            //         console.log(index)
            //     }
            // }
            oUl.onclick = e => {
                if (e.target.nodeName === "LI") {
                    e.target.innerHTML = "来自事件委托的点击"
                }
            }
        }
    </script>

最后，代码1的如果是后期动态生成的LI，那他点击事件就是不了

如代码3

    <ul id="ul">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        window.onload = () => {
            let oUl = document.getElementById("ul");
            let oLi = oUl.getElementsByTagName("li");
            for (let index = 0; index < oLi.length; index++) {
                oLi[index].onclick = () => {
                    console.log(index)
                }
            }
            for (let i = 0; i < 5; i++) {
                // 这里生成 的li上面赋予的点击事件是获取不到的
                let li = document.createElement("li");
                let text = document.createTextNode(i + "事件委托");
                li.appendChild(text)
                oUl.appendChild(li)

            }
        }
        </script>

所以上面的要用事件委托来操作

代码4

    <ul id="ul">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        window.onload = () => {
            let oUl = document.getElementById("ul");
            let oLi = oUl.getElementsByTagName("li");
            // for (let index = 0; index < oLi.length; index++) {
            //     oLi[index].onclick = () => {
            //         console.log(index)
            //     }
            // }
            oUl.onclick = e => {
                // 不管你什么 时候生成，反正 我点击都是有一个target表示当前点击的元素。
                if (e.target.nodeName === "LI") {
                    e.target.innerHTML = "来自事件委托的点击"
                }
            }
            for (let i = 0; i < 5; i++) {
                let li = document.createElement("li");
                let text = document.createTextNode(i + "事件委托");
                li.appendChild(text)
                oUl.appendChild(li)
            }
        }
    </script>

以上就是我对JS的事件委托理解

转载于:https://www.cnblogs.com/huzhuhua/p/10983680.html