Onclick 与 addEventListener [重复]

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

Such as:

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

or

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

但有些人说，添加“侦听器”的唯一“正确”方法是

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

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

如果您已经知道函数和元素是 html 的一部分，即不会动态添加，那么您最好内联添加函数，而不是使用像“addEventListener”这样的额外方法调用

还有一点需要注意

While onclick 适用于所有浏览器，addEventListener 在旧版本的 Internet Explorer 中不起作用，它使用 AttachEvent 代替。

OnClick is a DOM 级别 0财产。添加事件监听器是的一部分DOM 级别 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 代码

欲了解更多详细信息，您可以阅读以下内容：添加事件处理程序