為什么需要addEventListener？
先來看一個片段：
html代碼
<div id="box">事件執(zhí)行順序</div>
用on的代碼
?window.onload = function(){?
?? ?var box = document.getElementById("box");?
?? ? box.onclick = function(){?
?? ? ? console.log("我是box1");?
? ? ?}?
? ? box.onclick = function(){?
? ? box.style.fontSize = "18px";? ??
? ? console.log("我是box2");? ?
? ?}
?}
運行結(jié)果：“我是box2”
看到了吧杠袱，第二個onclick把第一個onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結(jié)果逼蒙，但是有時我們又需要執(zhí)行多個相同的事件，很明顯如果用on完成不了我們想要的寄疏，那不用猜是牢，你們肯定知道了，對陕截！addEventListener可以多次綁定同一個事件并且不會覆蓋上一個事件驳棱。
用addEventListener的代碼
window.onload = function(){
? ?var box = document.getElementById("box");
? ? ? ?box.addEventListener("click",function(){
?? ? ? console.log("我是box1");? ?})
? ? ? box.addEventListener("click",function(){? ?
? ? ? ? ?console.log("我是box2");
? ? ? })
?}
運行結(jié)果：我是box1
我是box2
addEventListenert方法第一個參數(shù)填寫事件名，注意不需要寫on农曲，第二個參數(shù)可以是一個函數(shù)社搅，第三個參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理驻债，第三個參數(shù)可以省略，大多數(shù)情況也不需要用到第三個參數(shù),不寫第三個參數(shù)默認false
第三個參數(shù)的使用
有時候的情況是這樣的
如果我給box加click事件形葬，如果我直接單擊box沒有什么問題合呐，但是如果我單擊的是child元素，那么它是怎么樣執(zhí)行的笙以？（執(zhí)行順序）
box.addEventListener("click",function(){? ?console.log("box");})
child.addEventListener("click",function(){? console.log("child"); })
執(zhí)行的結(jié)果：
child
box
也就是說淌实，默認情況事件是按照事件冒泡的執(zhí)行順序進行的。
如果第三個參數(shù)寫的是true猖腕，則按照事件捕獲的執(zhí)行順序進行的拆祈。
?box.addEventListener("click",function(){? console.log("box"); },true)
child.addEventListener("click",function(){console.log("child");})
執(zhí)行的順序結(jié)果：
? ? ? ? ? ? ? ? ?box
? ? ? child
事件冒泡執(zhí)行過程：
從最具體的的元素（你單擊的那個元素）開始向上開始冒泡，拿我們上面的案例講它的順序是：child->box
事件捕獲執(zhí)行過程：
從最不具體的元素（最外面的那個盒子）開始向里面冒泡倘感，拿我們上面的案例講它的順序是：box->child
