JavaScript（DOM）事件流--事件捕获、事件冒泡、阻止事件冒泡
程序员文章站
2022-06-28 18:52:14
DOM事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流分为3个阶段： 捕获阶段 当前目标段 冒泡阶段JS代码中只能执行捕获或者冒泡其中一个阶段。onclick和attachEvent只能得到冒泡阶段因此，在addEventListener()第三个参数如果是true，则表示捕获阶段调用时间处理程序。吐过第三个参数是false或者为空，则表示在事件冒泡阶段调用事件处理程序。
DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为3个阶段： 捕获阶段 当前目标段 冒泡阶段
JS代码中只能执行捕获或者冒泡其中一个阶段。onclick和attachEvent只能得到冒泡阶段
因此，在addEventListener()第三个参数如果是true，则表示捕获阶段调用时间处理程序。吐过第三个参数是false或者为空，则表示在事件冒泡阶段调用事件处理程序。
<head>
<style>
.father{
width: 500px;
height: 500px;
margin: auto;
background-color: blue;
}
.son{
width: 200px;
height: 200px;
margin: auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子 </div>
</div>
<script>
var son = document.querySelector('.son');
var father = document.querySelector('.father');
//捕获阶段 document -> html -> body -> father -> son
// son.addEventListener('click',function(){
// alert('son');
// },true);
// father.addEventListener('click',function(){
// alert('father');
// },true);
//点击son盒子，会先弹出father提示框，然后再弹出son提示框
//捕获阶段和冒泡阶段只能进行一个，所以注释了捕获阶段
//冒泡阶段 son -> father -> body -> html -> document
son.addEventListener('click',function(){
alert('son');
},false);
father.addEventListener('click',function(){
alert('father');
},false);
//点击son盒子，会先弹出son提示框，然后再弹出father提示框
</script>
</body>
捕获阶段程序运行，点击son，先弹出father再弹出son
冒泡阶段，先弹出son，再弹出father
有些事件是没有冒泡的，例如：onblur,onfocus,onmouseenter,onmouseleave
阻止事件冒泡
标准写法：利用事件对象里面的stopPropagation()方法。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
<style>
.father{
width: 500px;
height: 500px;
margin: auto;
background-color: blue;
}
.son{
width: 200px;
height: 200px;
margin: auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子 </div>
</div>
<script>
var son = document.querySelector('.son');
var father = document.querySelector('.father');
//冒泡阶段 son -> father -> body -> html -> document
son.addEventListener('click',function(e){
alert('son');
e.stopPropagation();//阻止冒泡
//e.cancelBubble = true;阻止冒泡，IE6/7/8使用的方法。
},false);
father.addEventListener('click',function(){
alert('father');
},false);
document.addEventListener('click',function(){
alert('document');
},false)
//点击son盒子，只弹出son提示框
</script>
</body>
</html>
通过方法stopPropagation()阻止冒泡。
非准写法：利用事件对象cancelBubble属性。
上述程序在son后阻止冒泡，但是如果点击father盒子，则会弹出father提示框，点击确定，接着会弹出document对话框。并没有阻止后面的冒泡。
本文地址：https://blog.csdn.net/weixin_42579348/article/details/110135439