使用“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);
什么是更“正确”更受支持的方式？
如果您已经知道函数和元素是 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 代码
有关更多详细信息，您可以阅读：添加事件处理程序
后者 ( addEventListener()) 是最好的方法，因为您可以将多个相同类型的事件附加到同一个元素。
通过分配 toonclick等，您将覆盖现有的处理程序。