摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監(jiān)聽器。

JavaScript不僅門檻低，而且是一門有趣、功能強大和非常重要的語言。各行各業(yè)的人發(fā)現(xiàn)自己最混亂的選擇是JavaSscript編程語言。由于有著各種各樣的背景，所以不是每個人都對JavaScript及其基本原理有廣泛的認識。通常來書，除非你去參加工作面試才會去思考為什么或者怎么做，否則JavaScript只是你工作的內(nèi)容。

這個系類的目標是深入探討JavaScript的一些概念和理論。主題來自于 Darcy Clarke的JavaScript典型面試問題列表。希望你不僅僅是為了答案而閱讀完這篇文章，每一篇文章會讓對過去學過的知識有一個新的理解，或者重溫你學習的東西，這有利于你用JavaScript實現(xiàn)所有交互。

事件委托是一種由其它元素而非事件目標元素來響應事件產(chǎn)生的行為的思想。用document元素來處理按鈕的點擊行為就是事件委托的一個例子，另一種常見情況是，用ul元素來處理其子元素li的事件。

有多種方法來處理事件委托。標準方法來源于原生瀏覽器的功能。瀏覽器以一種特定的工作流程來處理事件，并支持事件捕獲和事件冒泡。W3C關于瀏覽器怎么支持事件的文檔：W3C DOM Level 3 Events。一些JS庫和框架公開了其它方式，如發(fā)布/訂閱模型（將在后文提及）。

事件捕獲和事件冒泡是事件流中的兩個階段，任何事件產(chǎn)生時，如點擊一個按鈕，將從最頂端的容器開始（一般是html的根節(jié)點）。瀏覽器會向下遍歷DOM樹直到找到觸發(fā)事件的元素，一旦瀏覽器找到該元素，事件流就進入事件目標階段，該階段完成后，瀏覽器會沿DOM樹向上冒泡直到最頂層容器，看看是否有其它元素需要使用同一個事件。

下面的示例說明了這個過程。點擊按鈕會導致事件流識別本身在容器下面的文本，每一個元素都接收同樣的點擊監(jiān)聽代碼，由于事件捕獲，點擊事件會首先觸發(fā)HTML節(jié)點綁定的點擊處理程序，然后在事件冒泡階段的末尾返回到最頂層元素。

View this on JSFiddle

大多數(shù)現(xiàn)代庫使用冒泡監(jiān)聽，而在捕獲階段處理。瀏覽器包含一個方法來管理事件冒泡。事件處理程序可以調(diào)用stopPropagation告訴DOM事件停止冒泡，第二個方式是調(diào)用stopImmediatePropagation，它不僅停止冒泡，也會阻止這個元素上其它監(jiān)聽當前事件的處理程序觸發(fā)。然而,停止傳播事件時要小心,因為你不知道是否有其它上層的DOM元素可能需要知道當前事件。

還有第三個可以控制元素如何對事件作出回應的方法。所有現(xiàn)代瀏覽器支持preventDefault方法，這個方法會阻止瀏覽器處理事件的默認行為。一個常見示例就是鏈接，使用鏈接執(zhí)行UI操作是一種常見的做法。然而，當我們不希望鏈接跟普通被激活的鏈接一樣會在新標簽頁打開一個新頁面，就可以使用preventDefault方法來阻止這個默認行為。

還有其它實現(xiàn)事件委托的方法可以考慮，其中值得一提的就是發(fā)布/訂閱模型。發(fā)布/訂閱模型也稱為了廣播模型，牽涉到兩個參與者。通常，兩個參與者在DOM中并沒有緊密的聯(lián)系，而且可能是來自兄弟的容器?？梢越o它們共同的祖先元素設置監(jiān)聽處理程序，但是如果共同的祖先元素在DOM樹中處于較高層次（離根節(jié)點比較近），就會監(jiān)聽很多同輩元素的事件，會造成意想不到的結(jié)果；當然，也可能存在邏輯或結(jié)構(gòu)原因要分開這兩個元素。

發(fā)布/訂閱模型也能自定義事件。發(fā)布/訂閱模型從一個元素發(fā)送消息后并向上遍歷，有時也向下遍歷，DOM會通知遍歷路徑上的所有元素事件發(fā)生了。在下面的示例中，JQuery通過trigger方法傳遞事件。

View this on JSFiddle

使用事件委托來管理事件流有很多優(yōu)點，其中最大的優(yōu)點是改善性能。元素綁定的每一個監(jiān)聽器都會占用一些內(nèi)存，如果頁面上只有少數(shù)幾個監(jiān)聽器，我們也不會注意到它們之間的區(qū)別，然后，如果要監(jiān)聽一個50行5列的表格中的每個單元格，你的Web應用會開始變慢，為了使應用程序最快運行的最好方式是保持盡可能低的內(nèi)存使用。

使用事件委托能減少監(jiān)聽器數(shù)量，在元素的容器上綁定事件意味著只需要一個監(jiān)聽器。這種方法的缺點是,父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監(jiān)聽器。額外處理帶來的影響遠低于許多存在內(nèi)存中的監(jiān)聽器。

更少的監(jiān)聽器和更少的DOM交互也易于維護。父容器層次的監(jiān)聽器能處理多種不同的事件操作，這是一種簡單的方法來管理相關的事件操作，這些事件通常需要執(zhí)行相關功能或需要共享數(shù)據(jù)。

如果父容器是監(jiān)聽器，然后要執(zhí)行獨立的內(nèi)部操作而并不需要添加或者移除本身的監(jiān)聽器。元素操作在單頁應用中是極其常見的，為某部分添加一個按鈕這樣簡單的事情也會為應用程序創(chuàng)建一個潛在的性能塊，沒有合適的事件委托，就必須手動為每一個按鈕添加監(jiān)聽，如果每個偵聽器不清理干凈,它可能會導致內(nèi)存泄漏。瀏覽器不會清理頁面，因此在單頁應用中，所有從內(nèi)存中清理不當?shù)乃槠紩粼趦?nèi)存中，這些碎片會降低程序性能。

當在頁面中添加交互時，仔細考慮一下，是否真的需要去監(jiān)聽元素。

另一篇值得一讀的文章：Event Delegation In JavaScript

this 關鍵字在JavaScript中的一種常用方法是指代碼當前上下文。

如果this沒有被設置，則默認指向全局對象，其通常是window

如果一個函數(shù)中運行了一個內(nèi)聯(lián)函數(shù)，比如一個事件監(jiān)聽器，則this指向內(nèi)聯(lián)函數(shù)的源代碼。例如,當設置一個按鈕的單擊處理程序,this將引用匿名函數(shù)內(nèi)的按鈕。

如果函數(shù)是一個對象的構(gòu)造函數(shù)，this指向新對象。

如果函數(shù)被定義在一個對象上,然后調(diào)用對象時,this指向該對象。

在異步編程中，this可以很容易改變過程中一個功能操作。保持處理程序上下文的一個小技巧是將其設置到閉包內(nèi)的一個變量，當在上下文改變的地方調(diào)用一個函數(shù)時，如setTimeout，你仍然可以通過該變量引用需要的對象。

操作this的另一種方式是通過call、apply和bind。三種方法都被用于調(diào)用一個函數(shù)，并能指定this的上下文，你可以讓代碼使用你規(guī)定的對象，而不是依靠瀏覽器去計算出this指向什么。Call、apply和bind本身是相當復雜的,應該有自己的文檔記錄，我們會把這當做未來待解決問題的一部分。下面是一個改變this指向方法的示例：

View this on JSFiddle

事件委托和this是現(xiàn)代JavaScript中重要的功能，理解它們的工作原理是成功開發(fā)產(chǎn)品的關鍵，并且可以肯定的是，這是應聘JavaScript工程師必須要了解的。

  
本文根據(jù)@Nicolas Bevacqua的《JavaScript Interview Questions: Event Delegation and This》所譯，整個譯文帶有我自己的理解與思想，如果譯得不好或有不對之處還請同行朋友指點。如需轉(zhuǎn)載此譯文，需注明英文出處：http://modernweb.com/2014/11/25/javascript-interview-questions-event-d...