DOM事件流
事件流描述的是从页面中接受事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
分为三个阶段:
- 捕获阶段(从上往下,从外往内)
- 目标阶段
- 冒泡阶段(从下往上,从内往外)
注意:js只能执行捕获或者冒泡其中的一个阶段,两者不可共存
onclick和attachEvent只能得到冒泡阶段,如果需要捕获阶段的话,则需要使用addEventListener
事件冒泡
事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son')
// 捕获阶段 如果addEventListener 第三个参数为true那么则处于捕获阶段
father.addEventListener('click',function(){
alert('I am Father!!!');
})
son.addEventListener('click',function(){
alert('I am son~');
})
</script>
</html>
由上图观之,当我们点击子元素时,由于冒泡的存在,父元素也触发了点击事件.
注意:并非所有的事件都有冒泡,比如onblur,onfocus,onmouseenters,onmouseleave
事件捕获
事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
}
.son{
width: 200px;
height: 200px;
background-color: purple;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son')
// 冒泡阶段:如果addEventListener第三个参数是false或者省略,那么则处于冒泡阶段
father.addEventListener('click',function(){
alert('I am Father!!!');
},true)
son.addEventListener('click',function(){
alert('I am son~');
},true)
</script>
</html>
形象化解释
我们向水里面扔一块石头,首先它会有一个下降的过程,该过程就理解为捕获阶段。而当石头沉入水底后,水中就会产生从下到上的泡泡,这个阶段则为冒泡阶段。