DOM事件委托机制

最新推荐文章于 2023-03-11 11:38:46 发布

sunwan19941023

最新推荐文章于 2023-03-11 11:38:46 发布

阅读量71

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_49210479/article/details/110144802

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件委托是什么？

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

代码示例：

<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> 等。

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

sunwan19941023

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件委托机制

事件委托是什么？事件委托就是利用冒泡机制，将事件添加在目标元素的父元素或祖辈元素上，触发执行效果。也就是就是监听目标元素的祖先。代码示例：<body> <div id="div"> <button id="btn">点击</button> </div> <script> window.onload = function () { let .
复制链接

扫一扫