為什麼需要addeventlistener？
先來看乙個片段：
html**
追夢子
用on的**
1 window.onload = function()
6 box.onclick = function()
10 }
執行結果：「我是box2」
看到了吧，第二個onclick把第乙個onclick給覆蓋了，雖然大部分情況我們用on就可以完成我們想要的結果，但是有時我們又需要執行多個相同的事件，很明顯如果用on完成不了我們想要的，那不用猜，你們肯定知道了，對！addeventlistener可以多次繫結同乙個事件並且不會覆蓋上乙個事件。
用addeventlistener的**
1 window.onload = function())
6 box.addeventlistener("click",function())
9 }執行結果：我是box1
我是box2
addeventlistenert方法第乙個引數填寫事件名，注意不需要寫on，第二個引數可以是乙個函式，第三個引數是指在冒泡階段還是捕獲階段處理事件處理程式,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個引數可以省略，大多數情況也不需要用到第三個引數,不寫第三個引數預設false
第三個引數的使用
有時候的情況是這樣的
如果我給box加click事件，如果我直接單擊box沒有什麼問題，但是如果我單擊的是child元素，那麼它是怎麼樣執行的？（執行順序）
1 box.addeventlistener("click",function())
4 5 child.addeventlistener("click",function())
執行的結果：
child
box
也就是說，預設情況事件是按照事件冒泡的執行順序進行的。
如果第三個引數寫的是true，則按照事件捕獲的執行順序進行的。
1 box.addeventlistener("click",function(),true)
4 5 child.addeventlistener("click",function())
執行的結果：
boxchild
事件冒泡執行過程：
從最具體的的元素（你單擊的那個元素）開始向上開始冒泡，拿我們上面的案例講它的順序是：child->box
事件捕獲執行過程：
從最不具體的元素（最外面的那個盒子）開始向裡面冒泡，拿我們上面的案例講它的順序是：box->child
addEventListener和on的區別
為什麼需要addeventlistener？先來看乙個片段 html 追夢子用on的 1 window.onload function 6 box.onclick function 10 執行結果 我是box2 看到了吧，第二個onclick把第乙個onclick給覆蓋了，雖然大部分情況我們用on就...
記錄addEventListener的相關知識
1 addeventlistener的引數 有三個引數 第乙個引數表示事件名稱 不包括on，比如 click 第二個引數表示要接收事件處理的函式，第三個引數為usecapture 記錄一下第三個引數，有兩種方式，可以設定成boolean型別 usecapture 或者object型別 options...
addEventListener 的三個引數
addeventlistener 有三個引數 第乙個引數表示事件名稱 不含 on，如 click 第二個引數表示要接收事件處理的函式 第三個引數為 usecapture，本文就講解它。outdiv middlediv indiv 請在此點選滑鼠。info 上述是我們測試的 根據 info 的顯示來確...