事件模型

IE事件模型（沒有捕獲）（<＝ie8）

1. attachEvent(event, function)
   detachEvent(event, function)
   第一個參數為on+'event';
2. 目標對象event.srcElement；
3. this會指向window；
4. event.cancelBubble = true   // 停止冒泡
   event.returnValue = false    //  阻止預設事件

標準DOM事件模型（捕獲、目標、冒泡）(>ie8)

1. addEventListener(event, function, useCapture)
   removeEventListener(event, function, useCapture)
   useCapture為true，在捕獲階段執行，從外到里觸發；
   useCapture為false，在冒泡階段執行（預設），從裡到外觸發；
2. event.target和event.currentTarget
   target在事件流的目標階段（指向觸發事件監聽的對象）；
   currentTarget在事件流的捕獲，目標及冒泡階段（指向添加事件監聽的對象）；
   只有當事件流處在目標階段的時候，兩個的指向才是一樣的；
   而當處於捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級）。
3. this指向事件監聽對象；
4. event.stopPropagation()  //  停止冒泡
   event.preventDefault()    //   阻止預設事件
5. event.stopImmediatePropagation()，阻止剩餘的事件處理函數執行並且防止事件冒泡到DOM樹上，這個方法不接受任何參數；

自定義事件

var event = new Event('自定義事件');

// Listen for the event.
elem.addEventListener('自定義事件', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

CustomEvent 介面可以為 event 對象添加更多的數據；detail屬性可用於傳遞自定義數據：

var event = new CustomEvent('自定義事件', { 'detail': elem.dataset.time });
下麵的代碼允許你在事件監聽器中訪問更多的數據：

function eventHandler(e) {
  log('The time is: ' + e.detail);
}