摘要：與此同時，我們獲得了回調函數的句柄，從而可以隨時從元素上移除相應的事件監聽。對象會被作為第一個參數傳遞給事件監聽的回調函數。

Click、touch、load、drag、change、input、error、risize — 這些都是冗長的DOM（文檔對象模型）事件列表的一部分。事件可以在文檔(Document)結構的任何部分被觸發，觸發者可以是用戶操作，也可以是瀏覽器本身。事件并不是只是在一處被觸發和終止；他們在整個document中流動，擁有它們自己的生命周期。而這個生命周期讓DOM事件有更多的用途和可擴展性。

作為一個開發人員，我們必須要理解DOM事件是如何工作的，然后才能更好的駕馭它，利用它們潛在的優勢，開發出更高交互性的參與體驗（engaging experiences）。

反觀我做前端開發的這么長時間里，我覺得我從來沒有看到過一個關于DOM事件是如何工作的較為直接準確的解釋。今天我的目標就是在這個課題上給大家一個清晰的介紹，讓大家能夠更快速的了解它。 我首先會介紹DOM事件的基本使用方式，然后會深入挖掘事件內部的工作機制，解釋我們如何使用這些機制來解決一些常見的問題。

在過去，主流瀏覽器之間對于如何給DOM節點添加事件監聽有著很大的不一致性。jQuery這樣的前端庫為我們封裝和抽象了這些差異行為，為事件處理帶來了極大的便利。

如今，我們正一步步走向一個標準化的瀏覽器時代，我們可以更加安全地使用官方規范的接口。為了簡單起見，這篇文章將主要介紹在現代瀏覽器中如何管理事件。如果你在為IE8或者更低版本寫JavaScript，我會推薦你使用 polyfill 或者一些框架（如jQuery）來管理事件監聽。

在JavaScript中，我們使用如下的方式為元素添加事件監聽：

element.addEventListener(, , );

event-name(string)
這是你想監聽的事件的名稱或類型。它可以是任何的標準DOM事件（click, mousedown, touchstart, transitionEnd,等等），當然也可以是你自己定義的事件名稱（我們會在后面介紹自定義事件相關內容）。

callback(function)（回調函數）
這個函數會在事件觸發的時候被調用。相應的事件(event)對象，以及事件的數據，會被作為第一個參數傳入這個函數。

use-capture(boolean)
這個參數決定了回調函數(callback)是否在“捕獲(capture)”階段被觸發。不用擔心，我們稍后會對此做詳細的解釋。

var element = document.getElementById("element");
function callback() {
  alert("Hello");
}

// Add listener
element.addEventListener("click", callback);

Demo: addEventListener

移除不再使用的事件監聽是一個最佳實踐（尤其對于長時間運行的Web應用）。我們使用element.removeEventListener()方法來移除事件監聽：

element.removeEventListener(, , );

但是removeElementListener有一點需要注意的是：你必須要有這個被綁定的回調函數的引用。簡單地調用element.removeEventListener("click");是不能達到想要的效果的。

本質上來講，如果我們考慮要移除事件監聽（我們在長時間運行(long-lived)的應用中需要用到），那么我們就需要保留回調函數的句柄。意思就是說，我們不能使用匿名函數作為回調函數。

var element = document.getElementById("element");

function callback() {
  alert("Hello once");
  element.removeEventListener("click", callback);
}

// Add listener
element.addEventListener("click", callback);

Demo: removeEventListener

一個很容易遇到的問題就是回調函數沒有在預想的運行上下文被調用。讓我們看一個簡單的例子來解釋一下：

var element = document.getElementById("element");

var user = {
 firstname: "Wilson",
 greeting: function(){
   alert("My name is " + this.firstname);
 }
};

// Attach user.greeting as a callback
element.addEventListener("click", user.greeting);

// alert => "My name is undefined"

Demo: Incorrect callback context

我們希望回調函數中能夠正確的輸出”My name is Wilson”。事實上，結果確是”My name is undefined”。為了使得 this.firstName 能夠返回”Wilson”，user.greeting必須在user對象的上下文環境（context）中被執行（這里的運行上下文指的是.號左邊的對象）。

當我們將greeting函數傳給addEventListener方法的時候，我們傳遞的是一個函數的引用；user相應的上下文并沒有傳遞過去。運行的時候，這個回調函數實際上是在element的上下文中被執行了，也就是說，在運行的時候，this指向的是element，而不是user。所以this.firstName是undefined。

有兩種方式可以避免這種上下文錯誤的問題。第一種方法，我們可以在一個匿名函數內部調用user.greeting()方法，從而獲得正確的函數執行上下文(user)。

element.addEventListener("click", function() {
  user.greeting();
  // alert => "My name is Wilson"
});

Demo：Anonymouse functions

上一種方式并不是非常好，因為我們不能獲得回調函數的句柄以便后面通過.removeEventListener()移除事件監聽。另外，這種方式也比較丑陋。。我更喜歡使用.bind()方法(做為ECMAScript 5的標準內建在所有的函數對象中）來生成一個新的函數（被綁定過的函數），這個函數會在指定的上下文中被執行。然后我們將這個被綁定過的函數作為參數傳給.addEventListener()的回調函數。

// Overwrite the original function with
// one bound to the context of "user"
user.greeting = user.greeting.bind(user);

// Attach the bound user.greeting as a callback
button.addEventListener("click", user.greeting);
與此同時，我們獲得了回調函數的句柄，從而可以隨時從元素上移除相應的事件監聽。
```javascrips
button.removeEventListener("click", user.greeting);

DEMO:Function.ptototype.bind
想獲取Function.prototype.bind的更多信息，請點擊的瀏覽器支持頁面，以及polyfill的介紹。

Event對象在event第一次觸發的時候被創建出來，并且一直伴隨著事件在DOM結構中流轉的整個生命周期。event對象會被作為第一個參數傳遞給事件監聽的回調函數。我們可以通過這個event對象來獲取到大量當前事件相關的信息：
* type (String) — 事件的名稱
* target (node) — 事件起源的DOM節點
* currentTarget?(node) — 當前回調函數被觸發的DOM節點（后面會做比較詳細的介紹）
* bubbles (boolean) — 指明這個事件是否是一個冒泡事件（接下來會做解釋）
* preventDefault(function) — 這個方法將阻止瀏覽器中用戶代理對當前事件的相關默認行為被觸發。比如阻止 < a > 元素的click事件加載一個新的頁面
* stopPropagation (function) — 這個方法將阻止當前事件鏈上后面的元素的回調函數被觸發，當前節點上針對此事件的其他回調函數依然會被觸發。（我們稍后會詳細介紹。）
* stopImmediatePropagation (function) — 這個方法將阻止當前事件鏈上所有的回調函數被觸發，也包括當前節點上針對此事件已綁定的其他回調函數。
* cancelable (boolean) — 這個變量指明這個事件的默認行為是否可以通過調用event.preventDefault來阻止。也就是說，只有cancelable為true的時候，調用event.preventDefault才能生效。
* defaultPrevented (boolean) — 這個狀態變量表明當前事件對象的preventDefault方法是否被調用過
* isTrusted (boolean) — 如果一個事件是由設備本身（如瀏覽器）觸發的，而不是通過JavaScript模擬合成的，那個這個事件被稱為可信任的(trusted)
*eventPhase (number) — 這個數字變量表示當前這個事件所處的階段(phase):none(0), capture(1),target(2),bubbling(3)。我們會在下一個部分介紹事件的各個階段
*timestamp (number) — 事件發生的時間

此外事件對象還可能擁有很多其他的屬性，但是他們都是針對特定的event的。比如，鼠標事件包含clientX和clientY屬性來表明鼠標在當前視窗的位置。

我們可以使用熟悉的瀏覽器的調試工具或者通過console.log在控制臺輸出來更具體地查看事件對象以及它的屬性。

當一個DOM事件被觸發的時候，它并不只是在它的起源對象上觸發一次，而是會經歷三個不同的階段。簡而言之：事件一開始從文檔的根節點流向目標對象（捕獲階段），然后在目標對向上被觸發（目標階段），之后再回溯到文檔的根節點（冒泡階段）。

(圖片來源：W3C）

Demo: Slow motion event path

事件的第一個階段是捕獲階段。事件從文檔的根節點出發，隨著DOM樹的結構向事件的目標節點流去。途中經過各個層次的DOM節點，并在各節點上觸發捕獲事件，直到到達事件的目標節點。捕獲階段的主要任務是建立傳播路徑，在冒泡階段，事件會通過這個路徑回溯到文檔跟節點。

正如文章一開始的地方提到，我們可以通過將addEventListener的第三個參數設置成true來為事件的捕獲階段添加監聽回調函數。在實際應用中，我們并沒有太多使用捕獲階段監聽的用例，但是通過在捕獲階段對事件的處理，我們可以阻止類似clicks事件在某個特定元素上被觸發。

var form = document.querySelector("form");

form.addEventListener("click", function(event) {
  event.stopPropagation();
}, true); // Note: "true"

如果你對這種用法不是很了解的話，最好還是將useCapture設置為false或者undefined，從而在冒泡階段對事件進行監聽。

當事件到達目標節點的，事件就進入了目標階段。事件在目標節點上被觸發，然后會逆向回流，直到傳播至最外層的文檔節點。

對于多層嵌套的節點，鼠標和指針事件經常會被定位到最里層的元素上。假設，你在一個< div >元素上設置了click事件的監聽函數，而用戶點擊在了這個< div >元素內部的< p >元素上，那么< p >元素就是這個事件的目標元素。事件冒泡讓我們可以在這個< div >（或者更上層的）元素上監聽click事件，并且事件傳播過程中觸發回調函數。

事件在目標元素上觸發后，并不在這個元素上終止。它會隨著DOM樹一層層向上冒泡，直到到達最外層的根節點。也就是說，同一個事件會依次在目標節點的父節點，父節點的父節點。。。直到最外層的節點上被觸發。

將DOM結構想象成一個洋蔥，事件目標是這個洋蔥的中心。在捕獲階段，事件從最外層鉆入洋蔥，穿過途徑的每一層。在到達中心后，事件被觸發（目標階段）。然后事件開始回溯，再次經過每一層返回（冒泡階段）。當到達洋蔥表面的時候，這次旅程就結束了。

冒泡過程非常有用。它將我們從對特定元素的事件監聽中釋放出來，相反，我們可以監聽DOM樹上更上層的元素，等待事件冒泡的到達。如果沒有事件冒泡，在某些情況下，我們需要監聽很多不同的元素來確保捕獲到想要的事件。

Demo: Identifying event phases

絕大多數事件會冒泡，但并非所有的。當你發現有些事件不冒泡的時候，它肯定是有原因的。不相信？你可以查看一下相應的規范說明。

可以通過調用事件對象的stopPropagation方法，在任何階段（捕獲階段或者冒泡階段）中斷事件的傳播。此后，事件不會在后面傳播過程中的經過的節點上調用任何的監聽函數。

child.addEventListener("click", function(event) {
 event.stopPropagation();
});

parent.addEventListener("click", function(event) {
 // If the child element is clicked
 // this callback will not fire
});

調用event.stopPropagation()不會阻止當前節點上此事件其他的監聽函數被調用。如果你希望阻止當前節點上的其他回調函數被調用的話，你可以使用更激進的event.stopImmediatePropagation()方法。

child.addEventListener("click", function(event) {
 event.stopImmediatePropagation();
});

child.addEventListener("click", function(event) {
 // If the child element is clicked
 // this callback will not fire
});

Demo:Stopping propagation

當特定事件發生的時候，瀏覽器會有一些默認的行為作為反應。最常見的事件不過于link被點擊。當一個click事件在一個< a >元素上被觸發時，它會向上冒泡直到DOM結構的最外層document，瀏覽器會解釋href屬性，并且在窗口中加載新地址的內容。

在web應用中，開發人員經常希望能夠自行管理導航（navigation）信息，而不是通過刷新頁面。為了實現這個目的，我們需要阻止瀏覽器針對點擊事件的默認行為，而使用我們自己的處理方式。這時，我們就需要調用event.preventDefault().

anchor.addEventListener("click", function(event) {
  event.preventDefault();
  // Do our own thing
});
我們可以阻止瀏覽器的很多其他默認行為。比如，我們可以在HTML5游戲中阻止敲擊空格時的頁面滾動行為，或者阻止文本選擇框的點擊行為。

調用event.stopPropagation()只會阻止傳播鏈中后續的回調函數被觸發。它不會阻止瀏覽器的自身的行為。

[Demo:Preventing default vehaviour](http://jsbin.com/ibotap/1/edit)

---

###自定義事件
瀏覽器并不是唯一能觸發DOM事件的載體。我們可以創建自定義的事件并把它們分派給你文檔中的任意節點。這些自定義的事件和通常的DOM事件有相同的行為。
```javascrips
var myEvent = new CustomEvent("myevent", {
  detail: {
    name: "Wilson"
  },
  bubbles: true,
  cancelable: false
});

// Listen for "myevent" on an element
myElement.addEventListener("myevent", function(event) {
  alert("Hello " + event.detail.name);
});

// Trigger the "myevent"
myElement.dispatchEvent(myEvent);

在元素上合成不可信任的（untrusted）DOM事件（如click）來模擬用戶操作也是可行的。這個在對DOM相關的代碼庫進行測試的時候特別有用。如果你對此感興趣的話，在Mozilla Developer Network上有一篇相關的文章。

幾個注意點：

CustomEvent接口在IE 8以及IE更低版本不可用

來自Twitter的Flight框架使用了自定義事件進行模塊間通信。它強調了一種高度解耦的模塊化架構。
Demo：Custom events

代理事件監聽可以讓你使用一個事件監聽器去監聽大量的DOM節點的事件，在這種情況下，它是一種更加方便并且高性能的事件監聽方法。舉例來說，如果有一個列表< ul >包含了100個子元素< li >，它們都需要對click事件做出相似的響應，那么我們可能需要查詢這100個子元素，并分別為他們添加上事件監聽器。這樣的話，我們就會產生100個獨立的事件監聽器。如果有一個新的元素被添加進去，我們也需要為它添加同樣的監聽器。這種方式不但代價比較大，維護起來也比較麻煩。

代理事件監聽可以讓我們更簡單的處理這種情況。我們不去監聽所有的子元素的click事件，相反，我們監聽他們的父元素< ul >。當一個< li >元素被點擊的時候，這個事件會向上冒泡至< ul >，觸發回調函數。我們可以通過檢查事件的event.target屬性來判斷具體是哪一個< li >被點擊了。下面我們舉個簡單的例子來說明：

var list = document.querySelector("ul");

list.addEventListener("click", function(event) {
  var target = event.target;

  while (target.tagName !== "LI") {
    target = target.parentNode;
    if (target === list) return;
  }

  // Do stuff here
});

這樣就好多了，我們僅僅使用了一個上層的事件監聽器，并且我們不需要在為添加元素而考慮它的事件監聽問題。這個概念很簡單，但是非常有用。

但是我并不建議你在你的項目中使用上面的這個粗糙的實現。相反，使用一個事件代理的JavaScript庫是更好的選擇，比如 FT Lab的ftdomdelegate。如果你在使用jQuery，你可以在調用.on()方法的時候，將一個選擇器作為第二個參數的方式來輕松的實現事件代理。

// Not using event delegation
$("li").on("click", function(){});

// Using event delegation
$("ul").on("click", "li", function(){});

Demo: Delegate event listeners

load
load事件可以在任何資源（包括被依賴的資源）被加載完成時被觸發，這些資源可以是圖片，css，腳本，視頻，音頻等文件，也可以是document或者window。

image.addEventListener("load", function(event) {
  image.classList.add("has-loaded");
});

Demo：Image load event

onbeforeunload
window.onbeforeunload讓開發人員可以在想用戶離開一個頁面的時候進行確認。這個在有些應用中非常有用，比如用戶不小心關閉瀏覽器的tab，我們可以要求用戶保存他的修改和數據，否則將會丟失他這次的操作。

window.onbeforeunload = function() {
  if (textarea.value != textarea.defaultValue) {
    return "Do you want to leave the page and discard changes?";
  }
};

需要注意的是，對頁面添加onbeforeunload處理會導致瀏覽器不對頁面進行緩存?，這樣會影響頁面的訪問響應時間。 同時，onbeforeunload的處理函數必須是同步的（synchronous）。

Demo: onbeforeunload

在Financial Times中，我們使用了一個簡單的event.preventDefault相關的技巧防止了Safari在滾動的時候出現的抖動。（手機端開發接觸的不多，所以可能有所誤解，如果錯誤，請了解的同學提點一下。）

document.body.addEventListener("touchmove", function(event) {
 event.preventDefault();
});

需要提醒的是這個操作同時也會阻礙正常的原生滾動條的功能（比如使用overflow:scroll）。為了使得內部的子元素在需要的時候能夠使用滾動條的功能，我們在支持滾動的元素上監聽這個事件，并且在事件對象上設置一個標識屬性。在回調函數中，在document這一層，我們通過對這個擴展的isScrollable標識屬性來判斷是否對觸摸事件阻止默認的滾動行為。

// Lower down in the DOM we set a flag
scrollableElement.addEventListener("touchmove", function(event) {
 event.isScrollable = true;
});

// Higher up the DOM we check for this flag to decide
// whether to let the browser handle the scroll
document.addEventListener("touchmove", function(event) {
 if (!event.isScrollable) event.preventDefault();
});

在IE8即一下的版本中，我們是不能操作事件對象的。作為一個變通方案，我們將一些擴展的屬性設置在event.target節點對向上。

在一些復雜的響應式布局中，對window對象監聽resize事件是非常常用的一個技巧。僅僅通過css來達到想要的布局效果比較困難。很多時候，我們需要使用JavaScript來計算并設置一個元素的大小。

window.addEventListener("resize", function() {
  // update the layout
});

我推薦使用防抖動的回調函數來統一調整回調的頻率，從而防止布局上極端抖動的情況出現。

Demo: Window resizing

現在在項目中，我們經常使用CSS來執行一些轉換和動畫的效果。有些時候，我們還是需要知道一個特定動畫的結束時間。

el.addEventListener("transitionEnd", function() {
 // Do stuff
});

一些注意點：

如果你使用@keyframe動畫，那么使用animationEnd事件，而不是transitionEnd。
跟很多事件一樣，transitionEnd也向上冒泡。記得在子節點上調用event.stopPropagation()或者檢查event.target來防止回調函數在不該被調用的時候被調用。
事件名目前還是被各種供應商添加了不同的前綴（比如webkitTransitionEnd, msTransitionEnd等等）。使用類似于Modernizr的庫來獲取正確的事件前綴。
Demo：Transition end

animationiteration事件會在當前的動畫元素完成一個動畫迭代的時候被觸發。這個事件非常有用，特別是當我們想在某個迭代完成后停止一個動畫，但又不是在動畫過程中打斷它。

function start() {
  div.classList.add("spin");
}

function stop() {
  div.addEventListener("animationiteration", callback);

  function callback() {
    div.classList.remove("spin");
    div.removeEventListener("animationiteration", callback);
  }
}

如果你感興趣的話，我在博客中有另一篇關于animationiteration事件的文章。

Demo：Animation iteration

當我們的應用在加載資源的時候發生了錯誤，我們很多時候需要去做點什么，尤其當用戶處于一個不穩定的網絡情況下。Financial Times中，我們使用error事件來監測文章中的某些圖片加載失敗，從而立刻隱藏它。由于“DOM Leven 3 Event”規定重新定義了error事件不再冒泡，我們可以使用如下的兩種方式來處理這個事件。

imageNode.addEventListener("error", function(event) {
  image.style.display = "none";
});

不幸的是，addEventListener并不能處理所有的情況。我的同事Kornel給了我一個很好的例子，說明確保圖片加載錯誤回調函數被執行的唯一方式是使用讓人詬病內聯事件處理函數（inline event handlers）。

原因是你不能確定綁定error事件處理函數的代碼會在error事件發生之前被執行。而使用內聯處理函數意味著在標簽被解析并且請求圖片的時候，error監聽器也將并綁定。

Demo：Image error

從事件模型的成功上，我們可以學到很多。我們可以在我們的項目中使用類似的解耦的概念。應用中的模塊可以有很高的很復雜度，只要它的復雜度被封裝隱藏在一套簡單的接口背后。很多前端框架（比如Backbone.js）都是重度基于事件的，使用發布-訂閱（publish and subscribe）的方式來處理跨模塊間的通信，這點跟DOM非常相似。

基于事件的架構是極好的。它提供給我們一套非常簡單通用的接口，通過針對這套接口的開發，我們能完成適應成千上萬不同設備的應用。通過事件，設備們能準確地告訴我們正在發生的事情以及發生的時間，讓我們隨心所欲地做出響應。我們不再顧慮場景背后具體發生的事情，而是通過一個更高層次的抽象來寫出更加令人驚艷的應用。

“Document Object Model Level 3 Events Specification," W3C

“Graphical representation of an event dispatched in a DOM tree using the DOM event flow” (image) W3C

“Event,” Mozilla Developer Network

“DOM Design Tricks II,” J. David Eisenberg, A List Apart

“Event compatibility tables,” Quirksmode
特別感謝 Kornel對這篇文章做出的精彩的技術審查。

原文鏈接： smashingmagazine
轉載自： 伯樂在線 - Owen Chen