我們在之前的文章中為大家介紹了關於JavaScript中addEventListener的使用，相信小夥伴麼對addEventListener都有了進一步的了解，那麼我們今天繼續給大家介紹詳解addEventListener與on的差別！
為什麼需要addEventListener？
先來看一個片段：
html程式碼
<div id="box">追梦子</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");
}
}
运行结果：“我是box2”看到了吧，第二個onclick把第一個onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結果，但是有時我們又需要執行多個相同的事件，很明顯如果用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");
})
}
运行结果：我是box1
我是box2addEventListenert方法第一個參數填入事件名，注意不需要寫on，第二個參數可以是一個函數，第三個參數是指在冒泡階段還是捕獲階段處理事件處理程式,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個參數可以省略，大多數情況也不需要用到第三個參數,不寫第三個參數預設false
第三個參數的使用
有時候的情況是這樣的
<body> <div id="box"> <div id="child"></div> </div> </body>
如果我給box加click事件，如果我直接點擊box沒有什麼問題，但是如果我點擊的是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");
})
执行的结果：
box
child事件冒泡執行過程：
從最具體的的元素（你點擊的那個元素）開始向上開始冒泡，拿我們上面的案例講它的順序是： child->box
事件捕捉執行過程：
從最不具體的元素（最外面的那個盒子）開始向裡面冒泡，拿我們上面的案例講它的順序是：box->child
總結：
#透過對實例的方法詳述了addEventListener與on的差異、詳細小夥伴們對addEventListener與on的使用有了進一步的了解，希望對你的工作有幫助！
相關推薦：
#JavaScript中addEventListener的使用詳解
JavaScript中addEventListener的使用詳解
javascript DOM物件學習之事件流addEventListener()使用教學
#######解析js中addEventListener()與removeEventListener()### ######以上是詳解addEventListener與on的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
