js事件委托

来源：互联网发布：淘宝贴纸卖点怎么写编辑：程序博客网时间：2024/06/13 07:49

1、什么是事件委托：

事件就是onclick，onmouseover，onmouseout，等事件，事件委托就是把事件添加到某个元素上，让这个元素来完成这个事件。事件是利用冒泡的原理，把事件加到父级上，触发执行效果。

好处：1，提高性能。

一个父级里面有成百上千的子元素，要为每个子元素添加同样的事件，我们可以利用事件委托给父级添加事件，这样就不必遍历所有的子元素了，从而提高了性能

如：鼠标经过li时改变颜色，离开时恢复

<ul id="ul"><li>111111</li><li>222222</li><li>333333</li>        <li>444444</li><li>555555</li><li>666666</li>

 </ul>

window.onload = function(){var oUl = document.getElementById("ul");var oLi = oUl.getElementsByTagName("li");for(var i=0; i<oLi.length; i++){oLi[i].onmouseover = function(){this.style.background = "red";}oLi[i].onmouseout = function(){this.style.background = "";}}}

当li很多的时候，利用for循环为每个li添加事件比较影响性能。

下面利用事件委托的方式来实现这样的效果。html不变

window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");/*这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。ie：window.event.srcElement标准下:event.targetnodeName:找到元素的标签名*/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 = "";}}}

好处2，新添加的元素还会有之前的事件。

我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li

如：

<input type="button" value="添加" id="btn"/><ul id="ul"><li>111111</li><li>222222</li><li>333333</li>        <li>444444</li><li>555555</li><li>666666</li>

 </ul>

使用for循环无法为刚添加的li添加事件，因为点击添加的时候for循环已经执行完毕。

使用事件委托

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);}}

0 0