本文實例講述了JS中的事件委托。分享給大家供大家參考，具體如下：
事件委托（也叫事件代理），其實這個問題也簡單，要想弄明白事件委托，我們先要把事件冒泡的機制搞清楚。舉個事件冒泡的例子：
<ul> <li>點擊</li></ul><script> var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.addEventListener('click', function(){ alert('我是ul,我被點擊了'); }, false); li.addEventListener('click', function(){ alert('我是li,我被點擊了'); }, false);</script>在這段代碼中，當我們點擊li的時候出發了li的click事件，但是在這時，ul的click事件也被觸發了，這就是事件的冒泡。搞明白這個之后，我們就可以來說事件委托了，既然事件能從子元素(li)冒泡的父元素(ul)身上，那么我們就可以給ul自己加一個click事件，把所有li的事件都委托給了我們的父級(ul)身上，可能到這里有些朋友還是不明白這個事件委托到底有什么用，我們在舉一個事件委托的實例來說明一下：
<ul> <li>點擊1</li> <li>點擊2</li> <li>點擊3</li> <li>點擊4</li> <li>點擊5</li></ul><script> //使用事件委托的代碼 var ul=document.getElementsByTagName('ul')[0]; ul.addEventListener('click', function(e){ alert(e.target.innerHTML); }, false); //不使用事件委托，循環給li添加click事件 var li=document.getElementsByTagName('li') for(var i=0;i<li.length;i++){ li[i].onclick=function(){ alert(this.innerHTML); } }</script> 我們以上代碼把事件委托給了ul，只給ul增加點擊事件，在瀏覽器中運行點擊對應的li會彈出li對應的innerHTML，這個function(e){};中的e這個參數實際上就是當前我們點擊li時，系統傳給我們的一些事件信息,e.target實際上指的就是當前我們點擊的這個li，在這里我們每次彈出的都是當前點擊對象的innerHTML，這就是一個簡單的事件委托的案例。
而事件委托對于我們優化代碼意義是非常大的，我們都知道，頻繁的dom操作是非常耗費性能的，現在ul里邊是5個li，我們假如不用事件委托實現上面代碼所作的事情，就需要用for循環，給每個li都寫一個click事件，這樣一來dom操作就比較多了，如果是10個li呢，100個甚至更多呢，單不說dom操作影響的性能，li過多for循環自身就會占用大量的事件。如果利用事件委托，既避免了for循環耗費的性能，又省去了繁多的dom操作耗費的性能。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
