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耀盗。
