DOM的事件模型中addEventListener的第三个参数

2018-12-21 本文已影响0人张路1806

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'的。
另外如果使用阻止默认事件，会将除了传播之外的默认事件也阻止了，所以尽量不要直接阻止默认事件。

文章就到这里，如有错误欢迎指出