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

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

詳解事件委托

事件委托是一種由其它元素而非事件目標(biāo)元素來(lái)響應(yīng)事件產(chǎn)生的行為的思想。用document元素來(lái)處理按鈕的點(diǎn)擊行為就是事件委托的一個(gè)例子，另一種常見(jiàn)情況是，用ul元素來(lái)處理其子元素li的事件。

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

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

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

var nodes = $('*'),

node = {};

for (var i = 0; i < nodes.length; i ) {

node = nodes[i];

node.addEventListener('click', function (event) {

$('#EventListing').append('Bubble ' (event.currentTarget.id || event.currentTarget.tagName) '<br/>');

});

node.addEventListener('click', function (event) {

if (event.currentTarget != event.target) {

$('#EventListing ').append('Capture ' (event.currentTarget.id || event.currentTarget.tagName) ' <br/>');

}

}, true);

}

View this on JSFiddle

大多數(shù)現(xiàn)代庫(kù)使用冒泡監(jiān)聽(tīng)，而在捕獲階段處理。瀏覽器包含一個(gè)方法來(lái)管理事件冒泡。事件處理程序可以調(diào)用stopPropagation告訴DOM事件停止冒泡，第二個(gè)方式是調(diào)用stopImmediatePropagation，它不僅停止冒泡，也會(huì)阻止這個(gè)元素上其它監(jiān)聽(tīng)當(dāng)前事件的處理程序觸發(fā)。然而,停止傳播事件時(shí)要小心,因?yàn)槟悴恢朗欠裼衅渌蠈拥腄OM元素可能需要知道當(dāng)前事件。

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

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

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

$('#container').on('myCustomEvent', function (e, data) {

$('#insertText').append(data);

});

$('#button2').click(function () {

$('#button2').trigger('myCustomEvent', ['I triggered']);

});

View this on JSFiddle

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

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

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

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

當(dāng)在頁(yè)面中添加交互時(shí)，仔細(xì)考慮一下，是否真的需要去監(jiān)聽(tīng)元素。

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

this在JavaScript中是怎么工作的

this 關(guān)鍵字在JavaScript中的一種常用方法是指代碼當(dāng)前上下文。

●如果this沒(méi)有被設(shè)置，則默認(rèn)指向全局對(duì)象，其通常是window

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

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

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

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

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

setTimeout(function () {

div.append(checkForWindow(this));

div.append('<strong>that</strong> is the ' that.tagName '<br/>');

}, 300);

});

function checkForWindow(elm) {

if (elm instanceof Window) {

return 'this is the Window<br/>';

} else if (elm.tagName) {

return ('this is the ' elm.tagName '<br/>');

} else {

return ('this is ' elm '<br/>');

}

}

View this on JSFiddle

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

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