[譯] addEventListener 與 onclick，孰優孰劣？

wums 發布于2019-08-19 18:24 / 745人閱讀

摘要：上面的例子應用了匿名函數這個特性，還可以使用構造函數或者閉包來添加事件監聽器另一個重要特性，則是上面這段代碼中最后一行的最后一個參數，用來控制監聽器對于冒泡事件的響應。在這里你不能使用閉包或者匿名函數，并且控制域也是有限的。

原文出處：addEventListener vs onclick

之所以會想到這個話題，是因為在回顧自己之前寫的為 button 動態綁定事件的函數時，腦海里忽然浮現出了一個問題：addEventListener 方法，與 onclick="" 相比，各有哪些優點和缺點呢？于是用關鍵字“StackOverflow addEventListener click func false”進行搜索，第二個結果就是上面的文章鏈接，現將全文摘要如下：

綁定事件有幾種方式：

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），理論上可以為一個元素綁定無數個事件，實際應用中則決定于客戶端的電腦內存以及瀏覽器。

上面的例子應用了匿名函數這個特性，還可以使用構造函數或者閉包來添加事件監聽器：

var myFunctionReference = function() { /* do stuff here*/ }

element.attachEvent("onclick", myFunctionReference);
element.addEventListener("click", myFunctionReference , false);

另一個重要特性，則是上面這段代碼中最后一行的最后一個參數，用來控制監聽器對于冒泡事件的響應。95%的使用場景中，這個參數都為 false，attachEvent 以及內聯事件則都沒有可以實現相同功能的這個參數。

Inline Events 內聯事件

(HTML 的 onclick="" 屬性，以及 element.onclick)

在所有支持 JavaScript 的瀏覽器中，可以用下面的方式來添加內聯的事件監聽器。

Click me

雖然很多有經驗的開發人員對這種方式嗤之以鼻，但是它的確足夠的簡單粗暴。在這里你不能使用閉包或者匿名函數，并且控制域也是有限的。

還有另一種方法：

element.onclick = function () { /*do stuff here */ };

這個方法能實現相同的效果，并且有更多的控制域（因為是 JS 腳本，而不是 HTML 代碼），當然了，也能使用匿名函數、構造函數、閉包。

內聯事件一個明顯的不足：由于內聯事件是作為元素屬性保存起來的，這些屬性可以被覆蓋，所以如果為同一個事件綁定了多個處理程序，那么最后一個處理程序會覆蓋之前的程序（多謝 @謙龍指出此處的翻譯錯誤）。

var element = document.getElementById("testing");
element.onclick = function () { alert("did stuff #1"); };
element.onclick = function () { alert("did stuff #2"); };

運行上面的示例，將只會看到“did stuff #2”——第二行代碼覆蓋了默認的內聯 onclick 屬性，第三行代碼又將第二行代碼覆蓋了，所以會產生這樣的結果。

誰是最佳方案？

要回答這個問題，就要考慮各個瀏覽器的兼容性，以及實際需求了。即使現在只需要為一個元素綁定一個事件，但是以后很可能還要同時再綁定別的事件，這個時候，就需要用 attachEvent 和 addEventListener 了，否則用內聯方法就可以搞定了。

jQuery 以及其它的 JavaScript 框架，已經將各個瀏覽器的 DOM level 2 events 的實現以通用模型的形式封裝起來了，所以通過 jQuery 可以很方便地寫出適用于所有瀏覽器的代碼：

$(element).on("click", function () { /* do stuff */ });

在解決問題的時候，不要簡單地就事論事，比如這篇文章討論的就是如何添加事件監聽器，那就不妨寫一個適用于所有瀏覽器的方法：

function addEvent(element, evnt, funct){
  // if else 結構可用三元運算符 ? : 來精簡
  // 這里之所以要這樣寫，是便于讀者理解
  if (element.attachEvent) // IE 8 及更低版本瀏覽器
   return element.attachEvent("on"+evnt, funct);
  else // IE 8 及以上，或其它瀏覽器
   return element.addEventListener(evnt, funct, false);
}

// 調用示例
addEvent(
    document.getElementById("myElement"),
    "click",
    function () { alert("hi!"); }
);

相關文獻

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

云服務器 GPU云服務器孰優孰劣 addEventListener addeventlistener和on OnClick

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79556.html

個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

OnlyLing 2019-08-20 14:00 評論0 收藏0
個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

v1 2019-07-24 10:34 評論0 收藏0
個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

nidaye 2019-08-30 15:52 評論0 收藏0
個人文章分類整理

摘要：春節閑來無事，看看自己在上寫的文章，想不到已經篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節閑來無事，看看自己在SegmentFault上寫的文章，想不到已經20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...

heartFollower 2019-08-01 16:15 評論0 收藏0