JS事件委託

    hello,沐晴，又來更新啦，今天呢就接着上篇博文講講冒泡帶給咱們的一大優勢，就是產生了所謂的事件委託，初聽事件委託，以爲有點高大上，瞭解事後發現它真是個很是有用的東西。OK,下面就跟我一塊兒一探究竟把。。。

 先看看解析，事件委託：也稱事件代理 就是利用冒泡的原理 把加事件加到父級上，觸發執行效果

  首先呢，你必定寫過這樣的程序，有一個列表，當鼠標移入每一個li，背景顏色變紅，因而咱們寫出了這樣的代 碼：

（我給的代碼通常都寫的重點代碼，html你們能夠自行寫哈。）

window.onload = function(){ 
    var oUl = document.getElementById('ull');
    var aLi = document.getElementsByTagName('li'); //獲取全部列
    for(var i =0;i < aLi.length;i++){ 
         aLi[i].onmouseover = function(){ 
             this.style.background = "red";
         }
}

固然這樣一看代碼也沒什麼問題，經過循環給每一個li加事件，但想想若是咱們有不少個li,是否是要加不少次事件，這樣實際上是很是耗性能的。那麼咱們會想，能不能只加一個事件就能實現呢。固然是能的，否則我就不會在這扯了。

     那就是經過冒泡原理進行事件委託，咱們能夠把事件只加給父級oUL,這樣無論移入哪一個li,都會觸發父級的移入事件，（對冒泡不太理解的，能夠參考個人JS冒泡的文章），但這個時候也有個問題，由於個人需求是，讓對應的li變顏色，不是讓整個列表變，它怎麼知道我鼠標移入的是哪一個LI，這個時候萬能的事件對象中的一個屬性就要出場了，就是事件源 (無論事件綁定在那個元素中 都指的是實際觸發事件的那個的目標)，就是能獲取到你當前鼠標所在的LI，

不過這個有兼容性問題， IE和標準下不一樣，標準指的就是比較新版本的那些瀏覽器了

IE：window.event.srcElement
標準：event.target

因此須要作下兼容，也很簡單。

下面看下總體代碼：

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,一樣有這個事件。原理也很容易相同，由於事件是加在父親上面的，父親在，事件在，你們能夠本身測試一下。

 

好了，這就是我所理解的事件委託了，若有錯誤，歡迎指正，討論，我是沐晴，不見不散。