Onclick vs addEventListener [重复]答案

【问题标题】：Onclick vs addEventListener [duplicate]Onclick vs addEventListener [重复]
【发布时间】：2012-12-17 14:12:30
【问题描述】：

我对使用“onclick”“onmousedown”作为 HTML 元素的属性有点困惑。

如：

<button onclick="my_JS_function()"></button>

或

<div onmousedown="my_another_JS_funciton"></div>

但有些人说，只有“正确”的添加“听众”的方式是通过

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);

什么是更“正确”更受支持的方式？

【问题讨论】：

【解决方案1】：

如果您已经知道函数和元素是 html 的一部分，即不动态添加比添加函数内联而不是使用额外的方法调用（如“addEventListener”）更好

还有一点需要注意

虽然 onclick 适用于所有浏览器，但 addEventListener 不适用于旧版本的 Internet Explorer，它使用的是 attachEvent。

OnClick 是 DOM 级别 0 属性。 AddEventListener 是 DOM Level 2 定义的一部分。阅读：http://www.w3.org/TR/DOM-Level-2-Events/events.html

作为 HTML 标记属性添加的内联事件处理程序，例如：

 <a href="gothere.htm" onlick="alert('Bye!')">Click me!</a>

上述技术很简单，但有一定的缺点：它们允许每个元素只有一个事件处理程序。此外，使用内联事件处理程序时，JavaScript 代码与 HTML 标记的分离效果很差。

document.getElementById("my_id").addEventListener("onclick", my_JS_function, false);

优点：您可以添加多个事件处理程序。还分开 html 和 javascript 代码

更多细节你可以阅读这个：Adding an Event Handler

【讨论】：

并且在调试或维护此类应用程序时，其处理程序在逻辑上与按钮相关联，因为它被声明为内联。在这种情况下，内联声明使实现和维护变得容易。没有必要弄清楚它是否附加了其他事件。请再解释一下，在这种场景下，分离html和javascript有什么好处？

【解决方案2】：

后者 (addEventListener()) 是最好的方法，因为您可以将多个相同类型的事件附加到同一个元素。

通过分配给onclick等，您将覆盖现有的处理程序。

【讨论】：

但是我可以做一个调用其他函数的函数...来规避“onclick”的问题。
@alex in jquery addEventListener() 给出错误，未捕获的 TypeError: Object [object Object] has no method 'addEventListener' ??怎么办？
@simmisimmi 有问题可以ask it。