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>