成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[譯] addEventListener 與 onclick，孰優(yōu)孰劣？

wums / 758人閱讀

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

原文出處：addEventListener vs onclick

之所以會想到這個(gè)話題，是因?yàn)樵诨仡欁约褐皩懙臑?button 動態(tài)綁定事件的函數(shù)時(shí)，腦海里忽然浮現(xiàn)出了一個(gè)問題：addEventListener 方法，與 onclick="" 相比，各有哪些優(yōu)點(diǎn)和缺點(diǎn)呢？于是用關(guān)鍵字“StackOverflow addEventListener click func false”進(jìn)行搜索，第二個(gè)結(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），理論上可以為一個(gè)元素綁定無數(shù)個(gè)事件，實(shí)際應(yīng)用中則決定于客戶端的電腦內(nèi)存以及瀏覽器。

上面的例子應(yīng)用了匿名函數(shù)這個(gè)特性，還可以使用構(gòu)造函數(shù)或者閉包來添加事件監(jiān)聽器：

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

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

另一個(gè)重要特性，則是上面這段代碼中最后一行的最后一個(gè)參數(shù)，用來控制監(jiān)聽器對于冒泡事件的響應(yīng)。95%的使用場景中，這個(gè)參數(shù)都為 false，attachEvent 以及內(nèi)聯(lián)事件則都沒有可以實(shí)現(xiàn)相同功能的這個(gè)參數(shù)。

Inline Events 內(nèi)聯(lián)事件

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

在所有支持 JavaScript 的瀏覽器中，可以用下面的方式來添加內(nèi)聯(lián)的事件監(jiān)聽器。

Click me

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

還有另一種方法：

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

這個(gè)方法能實(shí)現(xiàn)相同的效果，并且有更多的控制域（因?yàn)槭?JS 腳本，而不是 HTML 代碼），當(dāng)然了，也能使用匿名函數(shù)、構(gòu)造函數(shù)、閉包。

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

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

運(yùn)行上面的示例，將只會看到“did stuff #2”——第二行代碼覆蓋了默認(rèn)的內(nèi)聯(lián) onclick 屬性，第三行代碼又將第二行代碼覆蓋了，所以會產(chǎn)生這樣的結(jié)果。

誰是最佳方案？

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

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

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

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

function addEvent(element, evnt, funct){
  // if else 結(jié)構(gòu)可用三元運(yùn)算符 ? : 來精簡
  // 這里之所以要這樣寫，是便于讀者理解
  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)文獻(xià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://systransis.cn/yun/79556.html

相關(guān)文章

  • 個(gè)人文章分類整理

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

    OnlyLing 評論0 收藏0

  • 個(gè)人文章分類整理

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

    v1 評論0 收藏0

  • 個(gè)人文章分類整理

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

    nidaye 評論0 收藏0

  • 個(gè)人文章分類整理

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

    heartFollower 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<