關於js中事件委託的技術原理

當給一個ul動態的添加一個li以後，console.log點擊沒有事件彈出

 1 window.onload = function () {
 2 var oUl=document.querySelector(".oUl");
 3 var aLi=document.querySelectorAll(".oUl li");
 4 
 5 for(var i=0;i<aLi.length;i++){
 6 aLi[i].onclick=function () {
 7 console.log(this.innerHTML);
 8 }
 9 }
10 oUl.innerHTML+="<li>lll</li>"
11 }
12 
13 
14 <ul class="oUl">
15 <li>aaaaa</li>
16 <li>aaaaa</li>
17 <li>aaaaa</li>
18 <li>aaaaa</li>
19 <li>aaaaa</li>
20 </ul>

點擊最後一個動態添加的li沒有反應，因此，在這裏解決這個問題就須要用到事件委託。

 

　　使用事件委託技術能讓你避免對特定的每一個節點添加事件監聽器；相反，事件監聽器是被添加到他們的父元素上，事件監聽器會分析從子元素冒泡上來的事件，找到哪一個子元素的事件。

　　當子元素的事件冒泡到父ul元素時，你能夠檢查事件對象的target屬性，捕獲真正被點擊的節點元素的引用。下面是一段很簡單的JavaScript代碼，演示了事件委託的過程：

// 找到父元素，添加監聽器...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被點擊的元素!
    // 若是被點擊的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // 找到目標，輸出ID!
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
    }
});

　　第一步是給父元素添加事件監聽器。當有事件觸發監聽器時，檢查事件的來源，排除非li子元素事件。若是是一個li元素，咱們就找到了目標！若是不是一個li元素，事件將被忽略。這個例子很是簡單，UL和li是標準的父子搭配。讓咱們試驗一些差別比較大的元素搭配。假設咱們有一個父元素div，裏面有不少子元素，但咱們關心的是裏面的一個帶有」classA」 CSS類的A標記：

 1 // 得到父元素DIV, 添加監聽器...
 2 document.getElementById("myDiv").addEventListener("click",function(e) {
 3     // e.target是被點擊的元素
 4     if(e.target && e.target.nodeName == "A") {
 5         // 得到CSS類名
 6         var classes = e.target.className.split(" ");
 7         // 搜索匹配!
 8         if(classes) {
 9             // For every CSS class the element has...
10             for(var x = 0; x < classes.length; x++) {
11                 // If it has the CSS class we want...
12                 if(classes[x] == "classA") {
13                     // Bingo!
14                     console.log("Anchor element clicked!");
15 
16                     // Now do something here....
17 
18                 }
19             }
20         }
21 
22     }
23 });

　　

　　上面這個例子中不只比較了標籤名，並且比較了CSS類名。雖然稍微複雜了一點，但仍是很具表明性的。好比，若是某個A標記裏有一個span標記，則這個span將會成爲target元素。這個時候，咱們須要上溯DOM樹結構，找到裏面是否有一個 A.classA 的元素。

由於大部分程序員都會使用jQuery等工具庫來處理DOM元素和事件，我建議你們都使用裏面的事件委託方法，由於這裏工具庫裏都提供了高級的委託方法和元素甄別方法。