事件冒泡（阻止冒泡）和事件捕捉（阻止捕获）
原理 ：
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 的弹出
作者：_Miss_Chen
链接：https://www.jianshu.com/p/2b4a8a6507f1
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
