Javascript中事件委托（delegate）是如何運作的

1.什麼是事件委托（Event Delegation）

通俗的了解就是，當給節點注冊事件時，為了優化代碼可以不用為每個子節點(例如<li>節點)添加相同的事件，借助事件冒泡機制，可以将這些事件統統委托給他們的父節點(ul)進行捕獲處理，這樣就達到了簡化代碼，也消除了循環引用導緻的記憶體洩漏的問題了。

示例代碼：

<ul id="listt">
  <li id="part1">Item 1</li>
  <li id="part2">Item 2</li>
  <li id="part3">Item 3</li>
  <li id="part4">Item 4</li>
  <li id="part5">Item 5</li>
  <li id="part6">Item 6</li>
</ul>
           

// 為父節點ul注冊一個事件
document.getElementById("list").addEventListener("click",function(e) {
  // e.target是被點選的元素   &&  檢查被點選元素的節點類型
  if(e.target && e.target.nodeName.toLowerCase == "li") {
    // 設定被點選元素的背景
    e.target.style.backgroundColor = red;
  }
});
           

Event 對象

定義和用法

target 事件屬性可傳回事件的目标節點（觸發該事件的節點），如生成事件的元素、文檔或視窗。

target 事件屬性

2.事件綁定

事件綁定進行的三個階段

分别是指：事件捕獲、事件目标、事件冒泡三個階段(IE低版本不支援事件冒泡)

IE的事件綁定： element.attach('onclick',function(){}); W3C事件綁定： element.addEventListener('click',function(e){});

兩者的聯系：

  1.兩者在一個dom節點上都能同時綁定多個事件，(傳統的一個元素進行多個事件綁定，會覆寫之前的事件) 2.W3C中,this指向的是綁定目前元素對象

兩者差別：

1.IE中，this表示的是window,event也綁定在window對象上，即window.event,W3C中，this是指目前對象 2.IE中僅僅會捕獲事件的冒泡階段，W3C中會處理事件的捕獲階段和冒泡階段 3.IE中注冊事件以" on + 事件名稱 ",W3C中注冊事件直接用事件名稱。

阻止事件傳播的兩種方式：

event.stopPropagation()   event.cancelBubble = true; 上述方法将停止事件的傳播，阻止它被分派到其他 Document 節點。