JS里的事件處理程序中我們常用的有兩種，一種是onclick，一種是addEventListener，下面我們來(lái)了解下兩者的區(qū)別，相信你了解之后就理解我標(biāo)題的意思了。
onclick這種方法是DOM0級(jí)，也就是最早用的，而addEventListener是DOM2級(jí)的，除此之外，DOM2級(jí)為了兼容IE，還新增加一個(gè)attachEvent方法。我在此強(qiáng)烈建議大家使用addEventListener，為什么，理由很簡(jiǎn)單，因?yàn)槭呛髞?lái)出的唄，那肯定是在之前基礎(chǔ)上優(yōu)化的（會(huì)心一笑）。
首先一個(gè)區(qū)別，onclick只能綁定一個(gè)事件，你之后再給綁定另一個(gè)事件的話，就會(huì)覆蓋之前那一個(gè)。而addEventListener就不同，它可以綁定多個(gè)事件，而且可以是同一事件類型，不同效果疊加，先后執(zhí)行，這樣你就不必有其他的顧慮了。具體例子如下：
<p id="ppp">我們都是好孩子</p>
/*
document.getElementById("ppp").onclick=function(){alert(1);}
document.getElementById("ppp").onclick=function(){alert(2);}
*/
**最后只彈出2，后1個(gè)把前面覆蓋**
--------------------------------------------------
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);})
**不僅不會(huì)覆蓋，點(diǎn)擊后先后彈出1和2。**
另外一個(gè)區(qū)別就是代碼的可維護(hù)性了，你想想，如果用內(nèi)聯(lián)事件在好幾個(gè)標(biāo)簽上都寫了onclick，那要修改方法名的時(shí)候肯定得一個(gè)個(gè)修改，而addEventListener就不用擔(dān)心這個(gè)問(wèn)題，因?yàn)樗梢园岩恍┫胍膁om節(jié)點(diǎn)選出來(lái)再綁定事件。
總結(jié)一句，如果你還需要兼容IE8及以下的，那還是老老實(shí)實(shí)用onclick或者把a(bǔ)ttachEvent與addEventListener做個(gè)封裝函數(shù)，或者干脆用jquery這種庫(kù)。如果是移動(dòng)端的項(xiàng)目，addEventListener是不二之選。
在如今IE快被淘汰的時(shí)代，移動(dòng)端根本不用考慮過(guò)多的兼容問(wèn)題，至于PC端網(wǎng)頁(yè)，好像有90%以上的公司都在用jquery，所以寫原生JS時(shí)我不假思索的選擇用addEventListener。
