Onclick vs addEventListener

Question

使用"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);

什么是更"恰当"、更受支持的方式？

Answer 1

如果您已经知道函数和元素是html的一部分，即不动态添加，那么您可以内联添加函数，而不是使用额外的方法调用，如"addEventListener">

需要注意的另一件事

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

OnClick是DOM Level 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代码

有关更多详细信息，您可以阅读：添加事件处理程序

Answer 2

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

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