JS事件委託實例詳解

本文主要和大家分享JS事件委託實例詳解，先看看解析，事件委託：也稱事件代理 就是利用冒泡的原理 把加事件加到父級上，觸發執行效果。

  首先呢，你一定寫過這樣的程序，有一個列表，當滑鼠移入每個li，背景顏色變紅，於是我們寫出了這樣的程式碼：

（我給的程式碼一般都寫的重點程式碼，html大家可以自行寫哈。）

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">當然這樣一看程式碼也沒什麼問題，透過循環給每個li加事件，但想一想如果我們有很多個li,是不是要加很多次事件，這樣其實是非常耗性能的。那我們會想，能不能只加一個事件就能實現。當然是能的，不然我就不會在這扯了。 </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">     那就是透過冒泡原理進行事件委託，我們可以把事件只加給父級oUL,這樣不管移入哪個li,都會觸發父級的移入事件，（對冒泡不太理解的，可以參考我的JS冒泡的文章），但這個時候也有個問題，因為我的需求是，讓對應的li變顏色，不是讓整個列表變，它怎麼知道我滑鼠移入的是哪個LI，這個時候萬能的事件物件中的一個屬性就要出場了，就是事件來源(不管事件綁定在那個元素中都指的是實際觸發事件的那個的目標)，就是能獲取到你當前滑鼠所在的LI，</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">不過這個有相容性問題，IE和標準下不同，標準指的就是比較新版本的那些瀏覽器了</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">IE：window.event.srcElement<br>標準：event. target</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">所以需要做下相容，也很簡單。 </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">下面看下整體程式碼：</p><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级oUL上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。

target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

 

整個需求這樣就完成了，而且當清單很多的時候大大的提高了效能。

其實事件委託還有第二個優點：就是新加入的元素還會有先前的事件

假定我們又有一個需求，點選某個按鈕，可以在列表中再創建一個li,這個時候一般方法，因為新創建的li沒有加事件，所以是不具備移入變紅的功能的，但是用事件委託的方法，新的li,同樣有這個事件。原理也很容易相同，因為事件是加在父親上面的，父親在，事件在，大家可以自己測試一下。

相關推薦：

#細說什麼是js中的事件冒泡和事件捕獲以及事件委託

事件擷取與冒泡以及事件委託對比分析

#Javascript事件委託相關詳解

#########################################################

以上是JS事件委託實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！