前端面试必备---事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

一个平平无奇的小高

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量831

点赞数 1

分类专栏： JavaScript 文章标签： dom 事件模块 css3 javascript typescript

本文链接：https://blog.csdn.net/qq_44646343/article/details/108812825

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

前言
一、事件委托的原理
二、使用原因？
三、事件委托实现步骤
四、案例
总结

前言

最近在做简单的前端项目练习，发现经常会用到【事件委托】，所以复习复习，写写笔记，方便以后查阅。有不对的地方，还请不吝赐教。

一、事件委托的原理

事件委托又叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当你点击最下面的节点的时候，事件就会逐步向上传递事件，一层一层的向外执行。事件委托，即元素委托它们的父级元素代为执行事件。

二、使用原因？

一般来说，DOM需要有事件处理程序，我们都会直接给它设定事件处理程序就好了，但是如果有很多DOM需要添加处理事件，比如，一个ul下有很多li,需要给每一个li都添加相同的点击事件，这个时候通常会用for循环的方法，然后给它们添加点击事件，看似很合理的做法，背后实则存在很大的性能弊端。
在js中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与DOM节点进行交互，所以访问DOM的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思路是减少DOM操作。
同时，在实际的项目开发中，我们会经常用到事件委托。例如当我们想要给动态创建的虚拟节点或者给用ajax异步加载，后添加进来的节点添加点击事件时，我们会用到事件委托，去给后添加进来的节点添加点击事件。另外，给一个ul里面的几个li添加了事件但是如果动态又生成了li，则刚生成的li不具备事件，这时也需要用到事件委托。

三、事件委托实现步骤

找到当前节点的父节点或者祖先节点；
将事件添加到你找到的这个节点或者祖先节点上；
找到触发对象，判断触发是否是想要的对象，进而执行后续操作；

四、案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托案例--【li委托ul将li变为红色】</title>
</head>
<script type="text/javascript">
    window.onload = function(){
        var oUl = document.getElementById("ul1");
        oUl.onclick = function(ev){
            var e = ev || window.event;
            var target = e.target || window.event.srcElement;
            if(target.nodeName.toLowerCase() == "li"){
                target.style.backgroundColor = "red";
            }
        }
    }
</script>
<body>
    <ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
</body>
</html>

总结

事件委托使用场景：

为DOM中的很多元素绑定相同事件；
为DOM中尚不存在的元素绑定事件；

一个平平无奇的小高

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端面试必备---事件委托

文章目录前言一、事件委托的原理二、使用原因？三、事件委托实现步骤四、案例总结前言最近在做简单的前端项目练习，发现经常会用到【事件委托】，所以复习复习，写写笔记，方便以后查阅。有不对的地方，还请不吝赐教。一、事件委托的原理事件委托又叫事件代理，就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。当你点击最下面的节点的时候，事件就会逐步向上传递事件，一层一层的向外执行。事件委托，即元素委托它们的父级元素代为执行事件。二、使用原因？一般来说，DOM需要有事件处理程序，我们..
复制链接

扫一扫