js多種監聽方式的區別
本文只說區別，詳細學習參考下面的文檔
參考文檔1
參考文檔2
在js中，監聽事件的方式有兩種，以 點擊事件 舉例,分別為：
方式一：
window.addEventListener('click', clickHandler, false);
方式二：
window.onclick = clickHandler;
區別
- 方式一可以指定事件觸發的階段（捕獲階段還是冒泡階段），方式二不行
- 方式一可以為每個事件指定多個回調函數；方式二只能為每個事件指定一個回調函數，后指定的回調函數會會覆蓋之前的回調函數
區別一很直觀的就可以看出來，下面舉例證明第二個區別
- 用
onresize 多次監聽窗口大小變化的事件，當窗口大小發生變化時，只會執行最后指定的回調函數，打印 456
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onresize = () => {
console.log(123)
}
window.onresize = () => {
console.log(456)
}
</script>
</body>
</html>
- 用
addEventListener 多次監聽窗口大小變化的事件，當窗口大小發生變化時，會執行每次指定的回調函數，打印 123 456
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.addEventListener("resize", () => {
console.log(123)
})
window.addEventListener("resize", () => {
console.log(456)
})
</script>
</body>
</html>
