addEventListener和onclick有什么区别?

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

上面的代码一起驻留在一个单独的.js文件中,它们都可以完美地工作。


当前回答

一个细节还没有被注意到:现代桌面浏览器将不同的按钮按下视为AddEventListener的“单击”(默认为“单击”和“onclick”)。

在Chrome 42和IE11上,onclick和AddEventListener都单击左边的fire和中间的click。 在Firefox 38上,onclick只在左键点击时触发,但AddEventListener点击在左、中、右击时触发。

此外,当使用滚动游标时,中键点击行为在浏览器中非常不一致:

在Firefox上,中键单击事件总是会触发。 在Chrome浏览器上,如果中间点击打开或关闭滚动光标,它们不会触发。 在IE上,它们会在滚动光标关闭时触发,但不会在打开时触发。

同样值得注意的是,任何键盘可选择的HTML元素(如input)的“click”事件也会在元素被选中时触发空格或enter。

其他回答

使用内联处理程序与内容安全策略不兼容,因此addEventListener方法从这个角度来看更安全。当然,您可以使用unsafe-inline来启用内联处理程序,但是,顾名思义,它并不安全,因为它会带来CSP阻止的大量JavaScript漏洞。

一个细节还没有被注意到:现代桌面浏览器将不同的按钮按下视为AddEventListener的“单击”(默认为“单击”和“onclick”)。

在Chrome 42和IE11上,onclick和AddEventListener都单击左边的fire和中间的click。 在Firefox 38上,onclick只在左键点击时触发,但AddEventListener点击在左、中、右击时触发。

此外,当使用滚动游标时,中键点击行为在浏览器中非常不一致:

在Firefox上,中键单击事件总是会触发。 在Chrome浏览器上,如果中间点击打开或关闭滚动光标,它们不会触发。 在IE上,它们会在滚动光标关闭时触发,但不会在打开时触发。

同样值得注意的是,任何键盘可选择的HTML元素(如input)的“click”事件也会在元素被选中时触发空格或enter。

虽然onclick可以在所有浏览器中工作,但addEventListener不能在旧版本的Internet Explorer中工作,后者使用attachEvent代替。

onclick的缺点是只能有一个事件处理程序,而其他两个将触发所有注册的回调。

如果你有另外两个函数,你可以看到区别:

var h = document.getElementById('a');
h.onclick = doThing_1;
h.onclick = doThing_2;

h.addEventListener('click', doThing_3);
h.addEventListener('click', doThing_4);

函数2、3和4可以工作,但函数1不行。这是因为addEventListener不会覆盖现有的事件处理程序,而onclick会覆盖任何现有的onclick = fn事件处理程序。

当然,另一个重要的区别是onclick总是可以工作,而addEventListener在版本9之前的ie中不能工作。你可以在IE <9中使用类似的attachEvent(语法略有不同)。

在我的Visual Studio代码中,addEventListener对事件有真实的智能感知

但onclick没有,只有假的