网站首页 > 基础教程正文

「Js」js事件委托是什么?使用js事件委托的好处有哪些?

ccvgpt 2024-10-17 08:54:48 基础教程 8 ℃

js事件委托是什么？使用事件委托又有哪些好处？相信很多的朋友或许会有这样的疑问，那么，接下来的这篇文章就给大家来说一说关于js事件委托的概念以及使用js事件委托的好处。

1、什么是js事件委托？

利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托，简单点来说就是给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件，更加通俗一点那就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。（事件有哪些？请看：JavaScript中文参考手册）

比如下面这个例子：原生js实现事件委托

<!DOCTYPE html>

<html>

<head>

<title>事件委托测试</title>

</head>

<body>

*{margin: 0;padding: 0;}

a{text-decoration: none;}

ul,li{list-style: none;}

div{display: block;width: 500px;padding: 200px 0 0 200px;}

div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}

div ul li:nth-child(2n){background: #f00;}

</style>

<div>

<ul>

</ul>

</div>

document.getElementsByTagName("ul")[0].addEventListener('click',function(e){

alert("点击的内容是："+e.target.innerHTML);

});

</script>

</body>

</html>

注意：js实现事件委托有三个步骤：

第一步：给父元素绑定事件

给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定

第二步：监听子元素的冒泡事件

这里默认是冒泡，点击子元素li会向上冒泡

第三步：找到是哪个子元素的事件

通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标

2、js事件委托的好处：

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

我们可以看一个例子：我们要做动态的添加li。点击button动态添加li

<li>aaaaaaaa</li>

<li>bbbbbbbb</li>

<li>cccccccc</li></ul>

不用事件委托我们会这样做：

window.onload = function(){

var oUl = document.getElementById("ul");

var aLi = oUl.getElementsByTagName("li");

var oBtn = document.getElementById("btn");

var iNow = 4;

for(var i=0; i<aLi.length; i++){

aLi[i].onmouseover = function(){

this.style.background = "red";

}

aLi[i].onmouseout = function(){

this.style.background = "";

}

oBtn.onclick = function(){

iNow ++;

var oLi = document.createElement("li");

oLi.innerHTML = 1111 *iNow;

oUl.appendChild(oLi);

}

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){

var oUl = document.getElementById("ul");

var aLi = oUl.getElementsByTagName("li");

var oBtn = document.getElementById("btn");

var iNow = 4;

oUl.onmouseover = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "red";

}

oUl.onmouseout = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "";

}

oBtn.onclick = function(){

iNow ++;

var oLi = document.createElement("li");

oLi.innerHTML = 1111 *iNow;

oUl.appendChild(oLi);

}

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

上一篇：批处理自动生成图片自适应大小、以图片文件名为描述的图片网页
下一篇： HTML之a标签的使用 html中a标签的作用

网站首页 > 基础教程 正文

「Js」js事件委托是什么?使用js事件委托的好处有哪些?

猜你喜欢

网站首页 > 基础教程正文