DOM的事件模型这里只讨论主流浏览器的DOM标准事件处理模型
什么是DOM事件模型
本人在初次接触时，大致学习了DOM的事件处理模型，但是那个时候更多的只记住了下面这段代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="x1" class="x1">
<div id="x2" class="x2">
<div id="x3" class="x3"></div>
</div>
</div>
</body>
<style>
.x1{
border: 1px solid red;
height: 50vh;
width: 50vh;
}
.x2{
border: 1px solid green;
height: 30vh;
width: 30vh;
}
.x3{
border: 1px solid yellow;
height: 10vh;
width: 10vh;
}</style>
<script>
x2.addEventListener('click',function(e){
console.log('x2')
},true)
x1.addEventListener('click',function(e){
console.log('x1')
},true)
x3.addEventListener('click',function(e){
console.log('x3')
},true)
</script>
</html>
可以看出，这个html中是一个嵌套的结构。我们在JS中写入了监听事件。
DOM事件模型就是这个事件触发之后，浏览器的处理模型（方法）。——仅供理解
在早期由于浏览器市场互相竞争，所以DOM事件模型并不统一，而后主流的浏览器达成标准，所以现在用的就是DOM事件标准模型。
捕获模型和冒泡模型
在这个模型中，处理办法有两种：
-
捕获模型 -- 由最顶层的节点（document）开始询问，查看有没有相应的事件，比如例子中的点击事件。如果有就执行，没有就询问下一个节点，直到询问到触发事件的元素为止。下面的子元素就不会询问到，如例子中，点击
<div id = "x2"></div>中绿色和黄色之间就不会询问到他的子元素。 -
冒泡模型 -- 由触发事件的元素开始，往上面节点逐步询问，直到顶层节点。
可以看出来这两种模型的最大不同就在于询问的顺序，如果触发事件的元素的其父元素也有这个事件可
执行，那么模型的不同就决定了执行顺序。
不太准确但很好理解的说法：冒泡就是从内到外，捕获就是从外到内
MDN的介绍
两种模型的兼容和addEventListener的第三个参数
在提供的例子中，大家可以发现我是写出了addEventListener的第三个参数true，在现在的标准模型中，我们是可以设定第三个参数来决定自己的处理方式的。第三个参数是布尔值：
-
true：捕获模型； -
false： 冒泡模型； - 不写（默认）： 冒泡模型；
一种特殊情况
就是监听的这个元素同时用两种模型监听，那么先触发哪一个呢？答案是按照代码执行顺序决定，先写先执行，后写后执行。（其实相同模型监听也是如此）
阻止传播事件
x3.addEventListener('click',function(e){
console.log('x2')
e.stopPropagation()
})
在我们的代码中添加e.stopPropagation()就可以阻止事件继续传播，传播到此停止。
比如例子中的传播，当我们点击黄色区域，是不会打印'x1'的。
另外如果使用阻止默认事件，会将除了传播之外的默认事件也阻止了，所以尽量不要直接阻止默认事件。
文章就到这里，如有错误欢迎指出
网友评论