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的操作，優化的效能可想而知！