事件委托（事件代理）

最新推荐文章于 2022-08-10 11:22:03 发布

雅琪妹妹

最新推荐文章于 2022-08-10 11:22:03 发布

阅读量210

点赞数

本文链接：https://blog.csdn.net/weixin_54167313/article/details/117404212

版权

在这里插入图片描述

如图所示，在瀑布流中，如果给每一个图片绑定点击事件，非常的繁琐而且很消耗内存。所以我们可以把每张图片上的点击事件委托给共同的父元素。

定义

事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。

为什么要用事件委托/代理？

一般来说，dom需要有事件处理程序，那么我们直接给他设置相应的处理程序就好了，可是比如一个ul里面有好多个li需要每一个都设置点击事件，那么可能我们首先会想到利用for循环实现。代码如下：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for循环给li添加点击事件</title>
</head>
<body>
<ul>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
</ul>
</body>
<script>
 var lis=document.getElementsByTagName('li'); 
for(var i=0;i<lis.length;i++){
	lis[i].onclick=function(){
		this.style.background='red';
	}
}
</script>
</html>

上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标li的位置，才能执行最后的操作，每次点击都要找一次li，直到找到当前点击的DOM节点li为止，这样再点击别的li，上面的操作就又循环往复，效果虽然实现了，但是大大的增加的页面的交互量，交互次数越多，浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这样就会很耗费内存的，性能也就会下降了，网站的体验效果就会下降很多，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因。

如果用事件委托，我们会怎么做呢？这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，不怕，我们有绝招：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom。代码如下：

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>target添加点击事件</title>
</head>
<body>
<ul class="aa">
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
	<li>121221212</li>
</ul>
<script type="text/javascript">
var a=document.getElementsByClassName('aa')[0];
a.onclick=function(e){
	e.target.style.background='red';
}
</script>
</body>
</html>

那么每点击一次就只对它的父级（如果只有一个父级）这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。

优势

提高性能，减少了事件绑定，从而减少内存占用。

例：

<div id="div3">
    <a href="#">a1</a><br>
    <a href="#">a2</a><br>
    <a href="#">a3</a><br>
    <a href="#">a4</a><br>
    <button>加载更多...</button>
</div>

// 封装通用的事件绑定函数
function bindEvent(elem, type, fn) {
    elem.addEventListener(type, fn)
}

//获取父元素
const fu = document.getElementById('div3')
bindEvent(fu, 'click', function (event) {
    // console.log(event.target) // 获取触发的元素
    let target=event.target
    event.preventDefault() // 阻止默认行为
    //过滤符合条件的子元素，主要是过滤掉 加载更多 
    if(target.nodeName.toLowerCase()==="A"){
        alert(target.innerHTML)

    }
})

雅琪妹妹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委托（事件代理）

如图所示，在瀑布流中，如果给每一个图片绑定点击事件，非常的繁琐而且很消耗内存。所以我们可以把每张图片上的点击事件委托给共同的父元素。定义事件委托，又名事件代理。事件委托就是利用事件冒泡，就是把子元素的事件都绑定到父元素上。如果子元素阻止了事件冒泡，那么委托也就没法实现了。为什么要用事件委托/代理？一般来说，dom需要有事件处理程序，那么我们直接给他设置相应的处理程序就好了，可是比如一个ul里面有好多个li需要每一个都设置点击事件，那么可能我们首先会想到利用for循环实现。代码如下：..
复制链接

扫一扫