JS事件委托或者事件代理原理以及實現

事件委托（事件代理）原理：簡單的說就是將事件交由別人來執行，就是將子元素的事件通過冒泡的形式交由父元素來執行。

為什么要用時間委托？

在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間

比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然后給它們添加事件

如果用事件委托，就會將所有的操作放到js程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能

 

代碼實現

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

Event對象提供了一個屬性叫target，可以返回事件的目標節點，我們成為事件源，也就是說，target就可以表示為當前的事件操作的dom，但是不是真正操作dom，當然，這個是有兼容性的，標准瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時只是獲取了當前節點的位置，並不知道是什么節點名稱，這里我們用nodeName來獲取具體是什么標簽名，這個返回的是一個大寫的，我們需要轉成小寫再做比較（習慣問題）：

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;// target表示在事件冒泡中觸發事件的源元素，在IE中是srcElement  
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　    alert(123);
　　　　　　　  　alert(target.innerHTML);
　　　　}
　　}
}

這樣改下就只有點擊li會觸發事件了，且每次只執行一次dom操作，如果li數量很多的話，將大大減少dom的操作，優化的性能可想而知！