Onclick vs addEventListener [duplicate]

问题描述 投票:10回答:2

通过使用“ 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);

什么是更“适当”的受支持的方式?

javascript events addeventlistener
2个回答
11
投票

[如果您已经知道函数和元素是html的一部分,即不会动态添加,那不是您直接添加函数而不是使用诸如“ addEventListener”之类的额外方法调用的好处,>

另一件事要注意

虽然onclick在所有浏览器中都可用

,但addEventListener在旧版本的Internet Explorer中不起作用,而旧版本使用的是attachEvent。

OnClick

DOM Level 0属性。 AddEventListenerDOM 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


4
投票

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


推荐问答