JavaScript中的事件委托及好处.pdfVIP

1，什么是事件委托：通俗的讲，事件就是 onclick ，onmouseover ，onmouseout，等就是 事件， 委托呢， 就是让别人来做，这个事件本来是加在某些元素上的， 然而你却加到别人身 上来做，完成这个事件。 也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。 好处呢： 1，提高性能。 我们可以看一个例子：需要触发每个 li 来改变他们的背景颜色。 lt;ul id=ulgt; lt;ligt;aaaaaaaalt;/ligt; lt;ligt;bbbbbbbblt;/ligt; lt;ligt;cccccccclt;/ligt; lt;/ulgt;nbsp; window.onload = function(){ var oUl = document.getElementById(ul); var aLi = oUl.getElementsByTagName(li); for(var i=0; ilt;aLi.length; i++){ aLi[i].onmouseover = function(){ this.style.background = red; } aLi[i].onmouseout = function(){ this.style.background = ; } } } 这样我们就可以做到 li 上面添加鼠标事件。 但是如果说我们可能有很多个 li 用 for 循环的话就比较影响性能。 下面我们可以用事件委托的方式来实现这样的效果。 html 不变 window.onload = function(){ var oUl = document.getElementById(ul); var aLi = oUl.getElementsByTagName(li); /* 这里要用到事件源： event 对象，事件源，不管在哪个事件中，只要你操作的那个元素 就是事件源。 ie：window.event.srcElement 标准下 :event.target nodeName:找到元素的标签名 */ 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 如： lt;input type=button id=btn /gt; lt;ul id=ulgt; lt;ligt;aaaaaaaalt;/ligt; lt;ligt;bbbbbbbblt;/ligt; lt;l