onclick 和click 的區別
也就是 addEventListener和on的區別
為什么需要addEventListener？
先來看一個片段：
html代碼
<div id="box">追夢子</div>
用on的代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
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的代碼
|
1
2
3
4
5
6
7
8
9
10
11
|
window.onload =
function
(){
var
box = document.getElementById(
"box"
);
box.addEventListener(
"click"
,
function
(){
console.log(
"我是box1"
);
})
box.addEventListener(
"click"
,
function
(){
console.log(
"我是box2"
);
})
}
運行結果：我是box1
我是box2
|
addEventListenert方法第一個參數填寫事件名，注意不需要寫on，第二個參數可以是一個函數，第三個參數是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個參數可以省略，大多數情況也不需要用到第三個參數,不寫第三個參數默認false
第三個參數的使用
有時候的情況是這樣的
<body>
<div id="box">
<div id="child"></div>
</div>
</body>
如果我給box加click事件，如果我直接單擊box沒有什么問題，但是如果我單擊的是child元素，那么它是怎么樣執行的？（執行順序）
|
1
2
3
4
5
6
7
8
9
10
|
box.addEventListener(
"click"
,
function
(){
console.log(
"box"
);
})
child.addEventListener(
"click"
,
function
(){
console.log(
"child"
);
})
執行的結果：
child
box
|
也就是說，默認情況事件是按照事件冒泡的執行順序進行的。
如果第三個參數寫的是true，則按照事件捕獲的執行順序進行的。
|
1
2
3
4
5
6
7
8
9
10
|
box.addEventListener(
"click"
,
function
(){
console.log(
"box"
);
},
true
)
child.addEventListener(
"click"
,
function
(){
console.log(
"child"
);
})
執行的結果：
box
child
|
事件冒泡執行過程：
從最具體的的元素（你單擊的那個元素）開始向上開始冒泡，拿我們上面的案例講它的順序是：child->box
事件捕獲執行過程：
從最不具體的元素（最外面的那個盒子）開始向里面冒泡，拿我們上面的案例講它的順序是：box->child
總結：
1.onclick事件在同一時間只能指向唯一對象
2.addEventListener給一個事件注冊多個listener
3.addEventListener對任何DOM都是有效的，而onclick僅限於HTML
4.addEventListener可以控制listener的觸發階段，（捕獲/冒泡）。