js中的事件委托

来源：互联网发布：倪妮和angelababy 知乎编辑：程序博客网时间：2024/06/05 17:50

什么是事件委托？顾名思义，那就是本来这件事是你做的，但是你让别人去帮你做了，以达到同样的目的。

在这里用了事件冒泡的原理，给父节点添加事件，然后去查找事件源。

这样做有什么好处呢？那就是提高性能。比如我要给瀑布流的图片添加淡入淡出的效果，那我就要用到for循环给每一个图片添加事件监听，瀑布流不断加载，添加的事件越来越多，这样就很影响性能了，而且新添加的节点也不具备这样的淡入淡出特效，要重新添加，这样就特别麻烦，事件委托在这时就体现出它强大的功能了。

先来举个栗子：

我要给ul里面的li添加鼠标移入移出改变颜色，一般我们会这样做，用一个for循环添加事件。

html和css代码：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style type="text/css">#list li{list-style: none;width: 200px;height: 40px;background-color: #f00;margin-bottom: 10px;}</style></head><body><ul id="list"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></body></html>

用for循环添加事件：

window.onload=function (){var oList=document.getElementById('list');var aLi=oList.getElementsByTagName('li');for (var i=0;i<aLi.length;i++) {aLi[i].onmouseover=function (){this.style.backgroundColor='#0ff';};aLi[i].onmouseout=function (){this.style.backgroundColor='#f00';};}};

下面用事件委托的方式：

window.onload=function (){var oList=document.getElementById('list');oList.onmouseover=function (ev){var iEvent=ev||event;//事件源，IE中用window.event.srcElement，标准用targetvar src=iEvent.target||iEvent.srcElement;if(src.nodeName.toLowerCase()=='li'){//判断是否为li触发src.style.backgroundColor='#0ff';}};oList.onmouseout=function (ev){var iEvent=ev||event;var src=iEvent.target||iEvent.srcElement;if(src.nodeName.toLowerCase()=='li'){src.style.backgroundColor='#f00';}};};

好了，上面的html代码我添加一个按钮，让它点击是添加li节点

<input type="button" name="btn" id="btn" value="添加" />

js中你也许会加上这些代码：

var oBtn=document.getElementById('btn');oBtn.onclick=function (){var addLi=document.createElement('li');oList.appendChild(addLi);}

这时候我们可以看到新添加的那些li鼠标移入移出没有变化，这是因为新添加的li没有在for循环里面，你也许会想到把for循环那一段代码用函数封装起来。如：

function changColor(){var aLi=oList.getElementsByTagName('li');for (var i=0;i<aLi.length;i++) {aLi[i].onmouseover=function (){this.style.backgroundColor='#0ff';};aLi[i].onmouseout=function (){this.style.backgroundColor='#f00';};}}

但是这种方式麻烦，又影响性能。

而用事件委托的方式直接加上前面的那些代码就噢了。

0 0