Onclick与addEventListener的区别

Question

我对在 HTML 元素中使用 "onclick" 和 "onmousedown" 属性感到有些困惑。

比如：

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

或者

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

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

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

在做那件事情时，有哪种更“适当”且得到更多支持的方式？

- Paul Brewczynski

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代码分开。

要了解更多详情，请阅读：添加事件处理程序

- Pranay Rana

---

当调试或维护此类应用程序时，其处理程序与按钮在逻辑上相关联，因为它是内联声明的。在这种情况下，内联声明使实现和维护变得容易。无需弄清是否有其他事件附加到它。请再次解释，在这种情况下，分离HTML和JavaScript的优点是什么？ - Schien

Answer 2

后者（addEventListener()）是最好的方式，因为您可以将同一类型的多个事件附加到同一个元素上。通过分配给onclick等，您将覆盖现有的处理程序。

- alex

---

但我可以编写一个调用其他函数的函数来绕过“onclick”问题。 - Paweł Brewczynski

@alex 在 jQuery 中使用 addEventListener() 函数会出现错误，Uncaught TypeError: Object [object Object] has no method 'addEventListener'。该怎么办？ - anam

@simmisimmi 如果你有问题，可以提问。 - alex