onlick与addEventListener

问题：

addEventListener 和 onclick 有什么不同吗？

var h=document.getElementById("a");
h.onclick=dothing1;
h.addEventListener("click", dothing2);

上面的代码放到了一个独立的.js文件中，并且都运行正常。

高票答案：

这两种方式都是正确的，但是没有一个本质上是“最佳”，而且开发者可能有恰当的理由选择同时使用这两种方法。

事件监听器 (addEventListener 和 IE中的attachEvent)
IE早期版本对JS的实现和其它任何浏览器都有着相当大的差距。在版本<9的情况下，你需要使用attachEvent[doc]方法，就像这样：

element.attachEvent('onclick', function() { /* 在这儿做点什么*/ });

在大部分其它的浏览器中（包括IE9及以上），你需要使用addEventListener[doc]方法, 就像这样：

element.addEventListener('click', function() { /* 在这儿做点什么*/ }, false);

通过使用这个方法 (DOM Level 2 events), 你理论上能够给单个元素附加无限数量的事件监听器。实际上唯一的限制就是客户端的内存和其它性能因素，这在每个浏览器上都各不相同。

上面的例子代表着使用一个匿名函数[doc]. 你也可以使用一个函数引用作为事件监听器[doc] 或者是一个闭包[doc]:

var myFunctionReference = function() { /* do stuff here*/ }
element.attachEvent('onclick', myFunctionReference);
element.addEventListener('click', myFunctionReference , false);

addEventListener的另一个重要特性就是它最后的那个参数，该参数控制着监听器如何应答冒泡事件[doc]. 上面的例子里面，我传递了false，这大概在95%的用例上都是标准用法。对于attachEvent或者内联事件，并没有与之对等的参数可供使用。

内联事件 (HTML 的onclick=""属性和 element.onclick)
在所有支持JS的浏览器中，你可以内联的设置一个事件监听器，意味着写在HTML代码里。你也可能已经见过这种写法：

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

大部分有经验的开发者会避开这种写法，不过它确实能够达成目标：简单且直接。你在这不能使用闭包或者匿名函数（即使handler函数某种意义上就是一个匿名函数），并且你对作用域的控制是有限的。

你提到的另一种方法:

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

同内联方式基本相同，除了你能对作用域有更多的控制（因为相较于纯HTML，你此刻写的是一段脚本），你也可以使用匿名函数、函数引用和闭包。

内联事件明显的一个缺点就是不像我们上面说的那几种一样，你一次只能分配一个内联事件。内联事件被作为元素上的一个属性/特性[doc], 这意味着它能够被重写。

使用上述HTML例子中的<a>元素:

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

...当你点击这个元素的时候，你只能看到"Did stuff #2"，因为后面的赋值把前面的onclick覆盖了，同时也覆盖了HTML上原生的onclick属性。在这里查看demo: http://jsfiddle.net/jpgah/.

哪个是最好的?
答案是看浏览器兼容性和需要。你当前是否需要为一个元素添加多个事件监听器？将来呢？多半是这样的。attachEvent和 addEventListener是必须的。如果不需要，那么内联事件将担此重任。

jQuery和其它JS框架为不同的浏览器封装了一套通用的DOM level 2 events实现，所以你可以不用担心IE的历史问题捣乱了，安心写跨浏览器一致的代码。相同的功能用jQuery写, 当当当当！:

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

但是，请不要为了这一件小事就引入了一个框架。你可以轻松的实现一个自己的小工具库来处理老浏览器上的问题：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// example
addEvent(
    document.getElementById('myElement'),
    'click',
    function () { alert('hi!'); }
);

来这儿试试: http://jsfiddle.net/bmArj/

要把上面所有的因素都考虑进来，除非你以某种其它的方式考虑浏览器的差异化（你问题中的代码可能没体现出来）,那就是IE9 以下addEventListener不被支持。

文档和相关参考阅读

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

onlick与addEventListener

问题：

高票答案：

推荐阅读更多精彩内容