js的事件流模型
事件捕抓：是一种以从上至下的的方式进行传播。以click事件为例，它会从最外层的根节点到达点击的节点。它是从最外层的根节点逐渐向目标节点传输的方式。
事件冒泡: 是一种从下之上的方式的传播方式，同样用click事件为例，事件由被点击的根节点开始往上传播直至点击的最外层根节点。
DOM0级模型(原始事件模型)
这种方式较为简单，并且兼容所有浏览器。但是却将界面与逻辑耦合在一起，可维护性很差。
例子
<!DOCTYPE html>
<html>
<head>
<title>JS事件流模型</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;" onclick="alert(0)">
<div id="i2" style="height: 100px;width: 100px;background: green;" onclick="alert(1)">
<div id="i3" style="height: 50px;width: 50px;background: blue;" onclick="alert(2)"></div>
</div>
</div>
</body>
</html>
当点击id为i3的div时，浏览器会返回2 1 0
IE事件模型
ie8之前的版本是不支持事件捕获的。
IE的事件模型分为两个过程:
事件处理阶段: 事件到达目标元素，触发目标元素的监听事件
事件冒泡阶段: 事件从目标元素冒泡到document，依茨执行经过的节点绑定的事件。
DOM2级模型
DOM2事件模型是W3C制定的标准模型，支持捕获型事件和冒泡型事件，调用事件的处理阶段分为捕获,目标,冒泡
实例
当点击id为i3的div时，浏览器会依次弹出0 1 3 2,addEventListener方法的第三个参数为声明绑定的事件为捕获型还是冒泡型，默认为false，也就是冒泡型
<!DOCTYPE html>
<html>
<head>
<title>JS事件流模型</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;">
<div id="i2" style="height: 100px;width: 100px;background: green;">
<div id="i3" style="height: 50px;width: 50px;background: blue;"></div>
</div>
</div>
</body>
<script type="text/javascript">
document.addEventListener('click',(e) => {
alert(0);
},true)
document.getElementById("i1").addEventListener('click',(e) => {
alert(1);
},true)
document.getElementById("i2").addEventListener('click',(e) => {
alert(2);
})
document.getElementById("i3").addEventListener('click',(e) => {
alert(3);
})
</script>
</html>
document对象与i1节点绑定的是捕获型的监听事件，i2与i3节点绑定的是冒泡型事件。
window --- document --- html --- body --- i1 --- i2 --- i3 --- i2 --- i1 --- body --- html --- document --- window
从window到i3过程为捕获阶段，依次执行了过程中绑定的事件，本例中执行了alert(0)和alert(1),然后到达了目标阶段的i3，执行i3绑定的事件alert(3),然后从i3到window的阶段为冒泡阶段。执行了alert(2),执行顺序为0 1 3 2
绑定监听事件使用的区别
在DOM0中直接绑定函数执行时，后定义的函数会覆盖前面定义的函数。click()是一个对象事件，点击即触发onclick()绑定的方法，onclick()是对象的属性，将其绑定函数后即为click()事件触发后执行的方法
<!DOCTYPE html>
<html>
<head>
<title>JS事件流模型</title>
</head>
<style type="text/css">
div{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div id="i1" style="height: 150px;width: 150px;background: red;"></div>
</body>
<script type="text/javascript">
document.getElementById("i1").onclick = function(){
alert(0);
} // 被覆盖
document.getElementById("i1").onclick = function(){
alert(1);
} // 执行
</script>
</html>
而addEventListener可以为事件绑定多个函数，并且绑定时不需要加on，而且它还可以接受三个参数useCapture来决定事件时绑定的捕获阶段还是冒泡阶段执行。
document.getElementById("i1").addEventListener('click',(e) => {
alert(0);
}) // 执行
document.getElementById("i1").addEventListener('click',(e) => {
alert(1);
}) // 执行
attachEvent可以为事件绑定多个函数，绑定时需要加on，其只支持冒泡阶段执行，所以不存在第三个参数。
document.getElementById("i1").attachEvent('onclick',function(e){
alert(0);
}) // 执行
document.getElementById("i1").attachEvent('onclick',function(e){
alert(1);
}) // 执行
Tips
- 关于
addEventListener和attachEvent的区别。
IE不支持addEventListener和removeEventListner。在ie为了实现类似功能是使用attachEvent和detachEvent
- 关于兼容性
attachEvent——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8
原文:https://www.cnblogs.com/WindrunnerMax/p/12558442.html
部分参考内容:https://www.jianshu.com/p/4af0476a08c9
网友评论