資訊專欄INFORMATION COLUMN
摘要：上面的例子應(yīng)用了匿名函數(shù)這個特性，還可以使用構(gòu)造函數(shù)或者閉包來添加事件監(jiān)聽器另一個重要特性，則是上面這段代碼中最后一行的最后一個參數(shù)，用來控制監(jiān)聽器對于冒泡事件的響應(yīng)。在這里你不能使用閉包或者匿名函數(shù)，并且控制域也是有限的。
原文出處：addEventListener vs onclick
之所以會想到這個話題，是因為在回顧自己之前寫的為 button 動態(tài)綁定事件的函數(shù)時，腦海里忽然浮現(xiàn)出了一個問題：addEventListener 方法，與 onclick="" 相比，各有哪些優(yōu)點和缺點呢？于是用關(guān)鍵字“StackOverflow addEventListener click func false”進行搜索，第二個結(jié)果就是上面的文章鏈接，現(xiàn)將全文摘要如下：
綁定事件有幾種方式：
Event Listeners(addEventListener 以及 IE 的 attachEvent)
IE 8 以及更低版本的 IE 中，需要用 attachEvent 方法：
element.attachEvent("onclick", function() { /* do stuff here*/ });
對于 IE 9 和更高版本的 IE，以及其它瀏覽器，則要用 addEventListener 方法：
element.addEventListener("click", function() { /* do stuff here*/ }, false);
用上面這種方法（DOM level 2 events），理論上可以為一個元素綁定無數(shù)個事件，實際應(yīng)用中則決定于客戶端的電腦內(nèi)存以及瀏覽器。
上面的例子應(yīng)用了匿名函數(shù)這個特性，還可以使用構(gòu)造函數(shù)或者閉包來添加事件監(jiān)聽器：
var myFunctionReference = function() { /* do stuff here*/ }
element.attachEvent("onclick", myFunctionReference);
element.addEventListener("click", myFunctionReference , false);
另一個重要特性，則是上面這段代碼中最后一行的最后一個參數(shù)，用來控制監(jiān)聽器對于冒泡事件的響應(yīng)。95%的使用場景中，這個參數(shù)都為 false，attachEvent 以及內(nèi)聯(lián)事件則都沒有可以實現(xiàn)相同功能的這個參數(shù)。
Inline Events 內(nèi)聯(lián)事件(HTML 的 onclick="" 屬性，以及 element.onclick)
在所有支持 JavaScript 的瀏覽器中，可以用下面的方式來添加內(nèi)聯(lián)的事件監(jiān)聽器。
Click me
雖然很多有經(jīng)驗的開發(fā)人員對這種方式嗤之以鼻，但是它的確足夠的簡單粗暴。在這里你不能使用閉包或者匿名函數(shù)，并且控制域也是有限的。
還有另一種方法：
element.onclick = function () { /*do stuff here */ };
這個方法能實現(xiàn)相同的效果，并且有更多的控制域（因為是 JS 腳本，而不是 HTML 代碼），當然了，也能使用匿名函數(shù)、構(gòu)造函數(shù)、閉包。
內(nèi)聯(lián)事件一個明顯的不足：由于內(nèi)聯(lián)事件是作為元素屬性保存起來的，這些屬性可以被覆蓋，所以如果為同一個事件綁定了多個處理程序，那么最后一個處理程序會覆蓋之前的程序（多謝 @謙龍 指出此處的翻譯錯誤）。
var element = document.getElementById("testing");
element.onclick = function () { alert("did stuff #1"); };
element.onclick = function () { alert("did stuff #2"); };
運行上面的示例，將只會看到“did stuff #2”——第二行代碼覆蓋了默認的內(nèi)聯(lián) onclick 屬性，第三行代碼又將第二行代碼覆蓋了，所以會產(chǎn)生這樣的結(jié)果。
誰是最佳方案？要回答這個問題，就要考慮各個瀏覽器的兼容性，以及實際需求了。即使現(xiàn)在只需要為一個元素綁定一個事件，但是以后很可能還要同時再綁定別的事件，這個時候，就需要用 attachEvent 和 addEventListener 了，否則用內(nèi)聯(lián)方法就可以搞定了。
jQuery 以及其它的 JavaScript 框架，已經(jīng)將各個瀏覽器的 DOM level 2 events 的實現(xiàn)以通用模型的形式封裝起來了，所以通過 jQuery 可以很方便地寫出適用于所有瀏覽器的代碼：
$(element).on("click", function () { /* do stuff */ });
在解決問題的時候，不要簡單地就事論事，比如這篇文章討論的就是如何添加事件監(jiān)聽器，那就不妨寫一個適用于所有瀏覽器的方法：
function addEvent(element, evnt, funct){
// if else 結(jié)構(gòu)可用三元運算符 ? : 來精簡
// 這里之所以要這樣寫，是便于讀者理解
if (element.attachEvent) // IE 8 及更低版本瀏覽器
return element.attachEvent("on"+evnt, funct);
else // IE 8 及以上，或其它瀏覽器
return element.addEventListener(evnt, funct, false);
}
// 調(diào)用示例
addEvent(
document.getElementById("myElement"),
"click",
function () { alert("hi!"); }
);
相關(guān)文獻
W3 HTML specification, element Event Handler Attributes
element.addEventListener on MDN
element.attachEvent on MSDN
Jquery.on
quirksmode blog "Introduction to Events"
CDN-hosted javascript libraries at Google
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79556.html
摘要：春節(jié)閑來無事，看看自己在上寫的文章，想不到已經(jīng)篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 春節(jié)閑來無事，看看自己在SegmentFault上寫的文章，想不到已經(jīng)20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關(guān)于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...
閱讀 2823·2021-10-26 09:48
閱讀 1693·2021-09-22 15:22
閱讀 4076·2021-09-22 15:05
閱讀 632·2021-09-06 15:02
閱讀 2619·2019-08-30 15:52
閱讀 2122·2019-08-29 18:38
閱讀 2771·2019-08-28 18:05
閱讀 2340·2019-08-26 13:55
