JS里的事件处理程序中我们常用的有两种，一种是onclick，一种是addEventListener，下面我们来了解下两者的区别，相信你了解之后就理解我标题的意思了。
onclick这种方法是DOM0级，也就是最早用的，而addEventListener是DOM2级的，除此之外，DOM2级为了兼容IE，还新增加一个attachEvent方法。我在此强烈建议大家使用addEventListener，为什么，理由很简单，因为是后来出的呗，那肯定是在之前基础上优化的（会心一笑）。
首先一个区别，onclick只能绑定一个事件，你之后再给绑定另一个事件的话，就会覆盖之前那一个。而addEventListener就不同，它可以绑定多个事件，而且可以是同一事件类型，不同效果叠加，先后执行，这样你就不必有其他的顾虑了。具体例子如下：
<p id="ppp">我们都是好孩子</p>
/*
document.getElementById("ppp").onclick=function(){alert(1);}
document.getElementById("ppp").onclick=function(){alert(2);}
*/
**最后只弹出2，后1个把前面覆盖**
--------------------------------------------------
document.getElementById("ppp").addEventListener("click",function(){alert(1);})
document.getElementById("ppp").addEventListener("click",function(){alert(2);})
或者
$("#ppp").on("click",function(){alert(1);})
$("#ppp").on("click",function(){alert(2);})
**不仅不会覆盖，点击后先后弹出1和2。**
另外一个区别就是代码的可维护性了，你想想，如果用内联事件在好几个标签上都写了onclick，那要修改方法名的时候肯定得一个个修改，而addEventListener就不用担心这个问题，因为它可以把一些想要的dom节点选出来再绑定事件。
总结一句，如果你还需要兼容IE8及以下的，那还是老老实实用onclick或者把attachEvent与addEventListener做个封装函数，或者干脆用jquery这种库。如果是移动端的项目，addEventListener是不二之选。
在如今IE快被淘汰的时代，移动端根本不用考虑过多的兼容问题，至于PC端网页，好像有90%以上的公司都在用jquery，所以写原生JS时我不假思索的选择用addEventListener。
网友评论