addEventListener和onclick區別

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，addEventListener以及內聯事件則都沒有可以實現相同功能的這個參數。

Inline Events 內聯事件

(HTML 的 onclick=""屬性，以及 element.onclick)
在所有支持 JavaScript 的瀏覽器中，可以用下面的方式來添加內聯的事件監聽器。

<a id="testing" href="#" onclick="alert('did stuff inline');">Click me</a>

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

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!'); }
);

來源： https://segmentfault.com/a/1190000005349550

來自為知筆記(Wiz)