事件冒泡（阻止冒泡）和事件捕捉（阻止捕获）
2019-05-15 本文已影响0人
_Miss_Chen
很多朋友私聊问我怎么阻止事件冒泡，不懂事件冒泡和事件捕捉的童鞋看过来了，小编今天就来给大家讲解一下。
我们先来简单看一下原理
原理 ：
DOM事件流（event flow ）：
存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件冒泡(event capturing） ：
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）
事件捕获（event capturing）：
当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: red;
}
#b{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id='a'>
<div id='b'>
<p id="p">111</p>
</div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('a');
var b=document.getElementById('b');
var p=document.getElementById('p');
a.onclick=function(){
alert('a')
}
b.onclick=function(){
alert('b')
}
p.onclick=function(){
alert('p')
}
</script>
</html>
这是事件冒泡，一共会弹出三次
第一个会弹出 a
第二个会弹出 b
第三个会弹出 c
//阻止事件冒泡
event.stopPropagation()
阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: red;
}
#b{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id='a'>
<div id='b'>
<p id="p">111</p>
</div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('a');
var b=document.getElementById('b');
var p=document.getElementById('p');
a.onclick=function(){
alert('a')
}
b.onclick=function(){
alert('b')
//阻止事件冒泡
event.stopPropagation()
}
p.onclick=function(){
alert('p')
}
</script>
</html>
这样就可以阻止事件冒泡
会弹出两次
第一个会弹出 a
第二个会弹出 b
阻止了 c 的弹出
事件捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: red;
}
#b{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id='a'>
<div id='b'>
<p id="p">111</p>
</div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('a');
var b=document.getElementById('b');
var p=document.getElementById('p');
a.addEventListener('click',function (){
alert('a');
},true);
b.addEventListener('click',function(){
alert('b')
},true)
p.addEventListener('click',function(){
alert('p')
},true)
//addEventListener 有三个参数
//第一个是 事件名
//第二个是 函数方法
//第三个是 布尔值 （判断是事件冒泡还是事件捕捉 true 是事件捕捉 false 是事件捕捉）
</script>
</html>
这是事件捕捉，一共会弹出三次
第一个会弹出 c
第二个会弹出 b
第三个会弹出 a
第三个值换成false，就会变成事件冒泡 （如上）
如果true和false共存的话，就会先执行true后执行false
阻止事件捕获
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#a{
width: 100px;
height: 100px;
background: red;
}
#b{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div id='a'>
<div id='b'>
<p id="p">111</p>
</div>
</div>
</body>
<script type="text/javascript">
var a=document.getElementById('a');
var b=document.getElementById('b');
var p=document.getElementById('p');
a.addEventListener('click',function (){
alert('a');
},true);
b.addEventListener('click',function(){
alert('b')
///阻止事件捕获
event.stopPropagation()
},true)
p.addEventListener('click',function(){
alert('p')
},true)
//addEventListener 有三个参数
//第一个是 事件名
//第二个是 函数方法
//第三个是 布尔值 （判断是事件冒泡还是事件捕捉 true 是事件捕捉 false 是事件捕捉）
</script>
</html>
这样就可以阻止事件捕获
会弹出两次
第一个会弹出 c
第二个会弹出 b
阻止了 a 的弹出
