為什么需要addEventListener？
先來(lái)看一個(gè)片段： html代碼
<div id="box">追夢(mèng)子</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"); }}運(yùn)行結(jié)果：“我是box2”看到了吧，第二個(gè)onclick把第一個(gè)onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結(jié)果，但是有時(shí)我們又需要執(zhí)行多個(gè)相同的事件，很明顯如果用on完成不了我們想要的，那不用猜，你們肯定知道了，對(duì)！addEventListener可以多次綁定同一個(gè)事件并且不會(huì)覆蓋上一個(gè)事件。
用addEventListener的代碼
window.onload = function(){ var box = document.getElementById("box"); box.addEventListener("click",function(){ console.log("我是box1"); }) box.addEventListener("click",function(){ console.log("我是box2"); })} 運(yùn)行結(jié)果：我是box1 我是box2addEventListenert方法第一個(gè)參數(shù)填寫(xiě)事件名，注意不需要寫(xiě)on，第二個(gè)參數(shù)可以是一個(gè)函數(shù)，第三個(gè)參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個(gè)參數(shù)可以省略，大多數(shù)情況也不需要用到第三個(gè)參數(shù),不寫(xiě)第三個(gè)參數(shù)默認(rèn)false
第三個(gè)參數(shù)的使用
有時(shí)候的情況是這樣的
<body> <div id="box"> <div id="child"></div> </div></body>如果我給box加click事件，如果我直接單擊box沒(méi)有什么問(wèn)題，但是如果我單擊的是child元素，那么它是怎么樣執(zhí)行的？（執(zhí)行順序）
box.addEventListener("click",function(){ console.log("box");})child.addEventListener("click",function(){ console.log("child");}) 執(zhí)行的結(jié)果： child box也就是說(shuō)，默認(rèn)情況事件是按照事件冒泡的執(zhí)行順序進(jìn)行的。 如果第三個(gè)參數(shù)寫(xiě)的是true，則按照事件捕獲的執(zhí)行順序進(jìn)行的。
box.addEventListener("click",function(){ console.log("box");},true)child.addEventListener("click",function(){ console.log("child");}) 執(zhí)行的結(jié)果： box child事件冒泡執(zhí)行過(guò)程：從最具體的的元素（你單擊的那個(gè)元素）開(kāi)始向上開(kāi)始冒泡，拿我們上面的案例講它的順序是：child->box 事件捕獲執(zhí)行過(guò)程：從最不具體的元素（最外面的那個(gè)盒子）開(kāi)始向里面冒泡，拿我們上面的案例講它的順序是：box->child
新聞熱點(diǎn)
疑難解答
圖片精選
