这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战
前言
在学了几天js的DOM事件后，咱们来学习下js的DOM事件流。
DOM事件流
我们给一个目标元素绑定点击事件，然后我们点击了这个元素，浏览器不会只响应这个元素的事件，因为你点击这个元素，等同于同时点击了该元素的祖先元素，所以就不只是响应目标元素的事件，如果这样，事件就会有先后的顺序。
历史上 网景公司推崇事件捕获，微软推崇事件冒泡。最后w3c统一了二者的想法。
先事件捕获，目标元素触发，后事件冒泡。
事件捕获
事件捕获，就是在目标元素触发事件之前，目标元素的祖先元素先把这个事件捕获触发，然后再响应到目标元素。
事件冒泡
事件冒泡，就是在目标元素触发事件之后，目标元素还会把事件往祖先元素上冒泡触发，直到最顶层。
总结就是三个阶段
- 捕获阶段
- 目标元素阶段
- 冒泡阶段
Dom绑定事件
我们再来看看dom是怎么绑定事件？
第一种, DOM0级
<div>我是内容</div>
<script>
const div = document.querySelector('div')
div.onclick = function () {
// 触发的函数
}
</script>
通过on + 事件名来绑定，这种绑定事件不能重复绑定，因为它只会响应一次。于是就有了DOM2级。
第二种， DOM2级
<div>我是内容</div>
<script>
const div = document.querySelector('div')
div.addEventListener('click', function () {
// 触发的函数
})
</script>
通过addEventListener来实现绑定事件，支持重复绑定。
dom.addEventListener(type, fn, options)
它有三个参数：
-
type：事件名,string类型，比如
click,或者scroll等等。 -
fn： 事件触发时响应的函数
-
options： 支持传2种类型，如下
-
布尔值：
代表的是是否在捕获阶段响应。默认是
false, 只会在冒泡阶段响应。true则代表只会在捕获阶段响应。 -
对象
- capture： 含义等同于上面的布尔值
- once：布尔值，
true表示fn只会触发一次。 - passive： 布尔值，
true表示fn内不会阻止默认事件。
-
例子
下面我们来看看DOM的事件流
<style>
.a-box {
width: 200px;
height: 200px;
border: 1px solid red;
}
.b-box {
margin: 20px;
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
<div class="a-box">
外盒子
<div class="b-box">
内盒子
</div>
</div>
<script>
const aBox = document.querySelector('.a-box')
const bBox = document.querySelector('.b-box')
aBox.addEventListener('click', function () {
console.log('我是外盒子-捕获')
}, true)
bBox.addEventListener('click', function () {
console.log('我是内盒子')
})
aBox.addEventListener('click', function () {
console.log('我是外盒子-冒泡')
}, false)
</script>
总结
以上就是js的DOM事件流知识，大家可以动手敲敲代码，巩固一下。
感谢你们的阅读。
