首先我们说一下冒泡事件和捕获事件分别是什么意思。
冒泡事件：即事件从内向外的执行的过程，如同水面上冒泡一样，从中间冒出，然后逐渐向四周消散。
捕获事件：即事件从外向内的执行过程，如同收网捕捞一样，逐渐把网收回来。
事件的默认绑定都是冒泡事件，例如前面我们所讲的，如果给父元素和子元素同时绑定了点击事件，当点击子元素时，是先执行子元素绑定的事件呢还是先执行父元素绑定的事件呢？
答案是：先执行子元素的，因为默认的事件绑定都是冒泡事件。
下面我们用一个例子来说明，请看以下代码：
一、冒泡事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件传播-冒泡事件</title>
<style type="text/css">
div{padding: 50px}
</style>
</head>
<body>
<div id="div1" style="width:400px;height:400px;background-color:gray;">
div1
<div id="div2" style="width:300px;height:300px;background-color:green;">
div2
<div id="div3" style="width:150px;height:150px;background-color:rgb(165, 78, 78);">div3</div>
</div>
</div>
<script type="text/javascript">
//冒泡事件 (在冒泡阶段执行的事件，从内向外依次执行)
document.getElementById('div1').onclick = function(){
console.log('点了div1');
}
document.getElementById('div2').onclick = function(){
console.log('点了div2');
}
document.getElementById('div3').onclick = function(){
console.log('点了div3');
}
</script>
</body>
</html>
在以上案例中，我们分别给div1、div2和div3绑定了点击事件，当我们点击div3时，点击事件触发的先后顺序为div3-div2-div1，即冒泡过程。
执行结果如下：
那么，大家可能会有疑问，能否改变事件触发的先后顺序呢，当然是可以的。
下面我们就来看捕获事件，它与冒泡的顺序正好相反。
请看以下代码：
二、捕获事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件传播-捕获事件</title>
<style type="text/css">
div{padding: 50px}
</style>
</head>
<body>
<div id="div1" style="width:400px;height:400px;background-color:gray;">
div1
<div id="div2" style="width:300px;height:300px;background-color:green;">
div2
<div id="div3" style="width:150px;height:150px;background-color:rgb(165, 78, 78);">div3</div>
</div>
</div>
<script type="text/javascript">
//捕获事件（在捕获阶段执行的事件，从外向内依次执行）
//只能以事件监听的方式才能做到 第三个参数设置为true
document.getElementById('div1').addEventListener('click', function(){
console.log('div1');
}, true);
document.getElementById('div2').addEventListener('click', function(){
console.log('div2');
}, true);
document.getElementById('div3').addEventListener('click', function(){
console.log('div3');
}, true);
</script>
</body>
</html>
在上面的代码中，我们同样给div1、div2和div3绑定了点击事件，可是，当我们点击div3时，发现先触发了div1的事件，再触发div2，最后是div3。这就是捕获的过程，从外向内执行。
想要实现事件捕获，必须要使用addEventListener进行事件监听方式绑定，并将第三个参数设置为true。
执行结果如下：
ok，以上就是关于冒泡事件与捕获事件的详细讲解，请大家务必掌握。
|
窥视卡
雷达卡
发表于 2023-1-25 12:19:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-17 00:06:39
