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。