首先了解一下事件冒泡与事件捕获
事件冒泡：即事件会从最内层的元素开始发生，一直向上传播，直到document对象，最终可以冒泡到window上。
事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。
image.png
从上图可以看出事件是先进行捕获然后再进行冒泡过程
具体咱们写段代码演示一下：
<div id="div1" onclick="test('div1')">
<div id="div2" onclick="test('div2')">
<div id="div3" onclick="test('div3')">
<button id="button1" onclick="test('button1')">点击按钮</button>
</div>
</div>
</div>
<!--onclick直接添加的是冒泡阶段的触发事件-->
<script>
function test(value) {
console.log(value)
}
//点击按钮，控制台会依次输出值 button1，div3，div2，div1
</script>
点击按钮，则会触发一个click点击事件，由于按钮上绑定了test()方法并传递了参数，
所以这时候控制台会输出值 button1，但此时点击事件并没有结束，因为父节点的存在，点击事件还要进行冒泡，冒泡至上一层，即div3上面，同时div3上也绑定了test()方法并传递了参数，所以这时候控制台会输出值 div3，同理进行下一轮冒泡，直至冒泡至根节点，所以会输出值 button1，div3，div2，div1
下面我们改进一下代码，加上捕获阶段的事件
关于添加事件可以参考我的另一篇文章 addEventListener与removeEventListener
<div id="div1" onclick="test('div1')">
<div id="div2" onclick="test('div2')">
<div id="div3" onclick="test('div3')">
<button id="button1" onclick="test('button1')">点击按钮</button>
</div>
</div>
</div>
<script>
function myListener(id) {
//onclick直接添加的是冒泡阶段的触发事件,这里使用addEventListener方法添加捕获阶段的触发事件
document.getElementById(id).addEventListener("click",function(event) {
console.log('b-' + id)
},true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("button1");
function test(value) {
console.log(value)
}
//点击按钮，控制台会依次输出值 b-div1，b-div2，b-div3，b-button1，button1，div3，div2，div1
</script>
综上可以看出事件总是会先捕获，再冒泡
不管有没有绑定方法，事件的捕获与冒泡总是会发生的
然后我们来了解一下怎么阻止当前事件或者阻止冒泡/捕获事件
event.stopPropagation 阻止捕获和冒泡阶段中当前事件的进一步传播
event.preventDefault 阻止当前事件（如果该事件可取消），但事件冒泡/捕获仍会发生
接下来我们来试一试这两个方法
<div id="div1" onclick="test('div1')">
<div id="div2" onclick="test('div2')">
<div id="div3" onclick="test('div3')">
<input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
</div>
</div>
</div>
<script>
function myListener(id) {
document.getElementById(id).addEventListener("click",function(event) {
console.log('b-' + id)
},true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("checkbox1");
function test(value) {
//当在冒泡阶段进行到div3上阻止冒泡，事件不会冒泡传递至上一层div2
if(value == 'div3') {
window.event.stopPropagation()
}
console.log(value)
}
//点击勾选框，勾选框会被选中，控制台会依次输出值 b-div1，b-div2，b-div3，b-checkbox1，checkbox1，div3
</script>
然后试试在时间捕获阶段阻止捕获
<div id="div1" onclick="test('div1')">
<div id="div2" onclick="test('div2')">
<div id="div3" onclick="test('div3')">
<input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
</div>
</div>
</div>
<script>
function myListener(id) {
document.getElementById(id).addEventListener("click",function(event) {
//在添加div2的捕获阶段事件时进行阻止，事件不会进行捕获传递到下一层div3
if(id == 'div2') {
event.stopPropagation();
}
console.log('b-' + id)
},true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("checkbox1");
function test(value) {
console.log(value)
}
//点击勾选框，勾选框会被选中，控制台会依次输出值 b-div1，b-div2
</script>
当我们既不想阻止冒泡，也不想阻止捕获，但不想让它选中，这时就可以用上preventDefault了
<div id="div1" onclick="test('div1')">
<div id="div2" onclick="test('div2')">
<div id="div3" onclick="test('div3')">
<input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
</div>
</div>
</div>
<script>
function myListener(id) {
document.getElementById(id).addEventListener("click",function(event) {
//preventDefault在冒泡阶段或者捕获阶段加都是一样的效果，如果该事件可取消，阻止当前事件，但不影响冒泡/捕获
//if(id == 'checkbox1') {
//event.preventDefault();
//}
console.log('b-' + id)
},true)
}
myListener("div1");
myListener("div2");
myListener("div3");
myListener("checkbox1");
function test(value) {
//preventDefault在冒泡阶段或者捕获阶段加都是一样的效果，如果该事件可取消，阻止当前事件，但不影响冒泡/捕获
if(value == 'checkbox1') {
window.event.preventDefault();
}
console.log(value)
}
//点击勾选框，勾选框不会被选中，但控制台会依次输出值 b-div1，b-div2，b-div3，b-checkbox1，checkbox1，div3，div2，div1
</script>
附加一个用的比较少的的方法event.stopImmediatePropagation
它也可以阻止事件捕获或者事件冒泡，用法参考stopPropagation
但它与stopPropagation不同的是，stopPropagation只会阻止冒泡或者是捕获。 但是stopImmediatePropagation除此之外还会阻止该元素的其它事件发生，stopPropagation不会阻止其它事件的发生。
<div id="div1" onclick="test('div1')">
<div id="div2" onclick="test('div2')">
<div id="div3" onclick="test('div3')">
<input type="checkbox" id="checkbox1" onclick="test('checkbox1')"/>点击勾选框
</div>
</div>
</div>
<script>
function myListener1(id) {
document.getElementById(id).addEventListener("click",function(event) {
console.log('b1-' + id)
},true)
}
function myListener2(id) {
document.getElementById(id).addEventListener("click",function(event) {
if(id == 'div2') {
event.stopImmediatePropagation();
//如果这里将stopImmediatePropagation换成stopPropagation，输出结果将会改变哦，可以自己试一试感受一下二者的区别
//event.stopPropagation();
}
console.log('b2-' + id)
},true)
}
function myListener3(id) {
document.getElementById(id).addEventListener("click",function(event) {
console.log('b3-' + id)
},true)
}
myListener1("div1");
myListener2("div1");
myListener3("div1");
myListener1("div2");
myListener2("div2");//到这里的时候stopImmediatePropagation阻止了捕获过程，同时阻止了div2上的后面的myListener3("div2")绑定的方法
myListener3("div2");
myListener1("div3");
myListener2("div3");
myListener3("div3");
myListener1("checkbox1");
myListener2("checkbox1");
myListener3("checkbox1");
function test(value) {
console.log(value)
}
//点击勾选框，勾选框会被选中，控制台会依次输出值 b1-div1，b2-div1，b3-div1，b1-div2，b2-div2
</script>
