JS事件委託機制簡介

標籤：div   參考   字串   str   src   大寫   說明   html   事件操作   

目的——為了減少對DOM的操作，使用事件委託。

理解——舉例說明：有三個同事預計會在周一收到快遞。為簽收快遞，有兩種辦法：一是三個人在公司門口等快遞；二是委託給前台MM代為簽收。現實當中，我們大都採用委託的方案（公司也不會容忍那麼多員工站在門口就為了等快遞）。前台MM收到快遞後，她會判斷收件者是誰，然後按照收件者的要求籤收，甚至代為付款。這種方案還有一個優勢，那就是即使公司裡來了新員工（不管多少），前台MM也會在收到寄給新員工的快遞後核實並代為簽收。

原理——事件委託是利用事件的冒泡原理來實現的，何為事件冒泡呢？就是事件從最深的節點開始，然後逐步向上傳播事件，舉個例子：頁面上有這麼一個節點樹，div>ul>li>a;比如給最裡面的a加一個click點擊事件，那麼這個事件就會一層一層的往外執行，執行順序a>li>ul>div，有這樣一個機制，那麼我們給最外面的div加點擊事件，那麼裡面的ul，li，a做點擊事件的時候，都會冒泡到最外層的div上，所以都會觸發，這就是事件委託，委託它們父級代為執行事件。

這裡用父級ul做事件處理，當li被點擊時，由於冒泡原理，事件就會冒泡到ul上，因為ul上有點擊事件，所以事件就會觸發，當然，這裡當點擊ul的時候，也是會觸發的，那麼問題就來了，如果我想讓事件代理的效果跟直接給節點的事件效果一樣怎麼辦，比如說只有點擊li才會觸發，不怕，我們有絕招：

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;    if(target.nodeName.toLowerCase() == ‘li‘){        　 alert(123);　　　　 alert(target.innerHTML);     } }}

　　toLowerCase()函數是將字串轉為小寫。

 

 

參考來源：http://www.cnblogs.com/liugang-vip/p/5616484.html

JS事件委託機制簡介