爲什麼需要addEventListener？
先來看一段html代碼：
<div id="box">我是DIV</div>
1、用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");
}
}
運行結果：我是box2
看到了吧，第二個onclick把第一個onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結果，但是有時我們又需要執行多個相同的事件，很明顯如果用on完成不了我們想要的，那不用猜，你們肯定知道了，對！addEventListener可以多次綁定同一個事件並且不會覆蓋上一個事件。
2、用addEventListener的代碼。
window.onload = function(){
var box = document.getElementById("box");
box.addEventListener("click",function(){
console.log("我是box1");
})
box.addEventListener("click",function(){
console.log("我是box2");
})
}
運行結果：我是box1
我是box23、addEventListener方法第一個參數填寫事件名（注意不需要寫on），第二個參數可以是一個函數，第三個參數是指在冒泡階段還是捕獲階段處理事件處理程序,如果爲true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個參數可以省略，大多數情況也不需要用到第三個參數,不寫第三個參數默認false。
4、第三個參數的使用。
有時候的情況是這樣的：
<body>
<div id="box">
<div id="child"></div>
</div>
</body>
如果我給box加click事件，如果我直接單擊box沒有什麼問題，但是如果我單擊的是child元素，那麼它是怎麼樣執行的（執行順序）？
var box = document.getElementById("box");
var child = document.getElementById("child");
box.addEventListener("click",function(){
console.log("box");
})
child.addEventListener("click",function(){
console.log("child");
})
運行結果：child
box也就是說，默認情況事件是按照事件冒泡的執行順序進行的，如果第三個參數寫的是true，則按照事件捕獲的執行順序進行的。box.addEventListener("click",function(){
console.log("box");
},true)
child.addEventListener("click",function(){
console.log("child");
},true)
運行結果：box
child事件冒泡執行過程：從最具體的的元素（你單擊的那個元素）開始向上冒泡，拿我們上面的案例講它的順序是：child->box。
事件捕獲執行過程：從最不具體的元素（最外面的那個盒子）開始向裏冒泡，拿我們上面的案例講它的順序是：box->child。