关于事件冒泡和事件委托

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

在日常的开发中，其实事件冒泡和事件捕获其实是比较常见的，在开发中也经常用到。

• 举个小栗子

在一个蒙版中，点击里面的内容，蒙版不会关闭或者消失，而点击外层蒙版，那么蒙版就会消失。想要实现这种效果那就得知道时间冒泡和事件捕获。

1. 事件冒泡 顾名思义，就是事件开始冒泡，从最精确的地方一直向外冒泡。

<div id="ele"  class="container">
  <div  class="center">
     <div  class="owner">
     </div>
  </div>
</div>
let owner = document.getElementsByClassName('owner')[0]
let center = document.getElementsByClassName('center')[0]
let container = document.getElementsByClassName('container')[0]
function go(){
  console.log(1)
}
function go2(){
  console.log(2)
}
function go3(){
  console.log(3)
}
owner.addEventListener('click',function(){
  go()
},true)
center.addEventListener('click',function(){
  go2()
},true)
container.addEventListener('click',function(){
  go3()
},true)

如此三个div盒子 如果对这三个div进行点击操作，你会发现此时结果为 3 2 1,因为在addEventListener第三个参数就是控制是冒泡还是捕获，默认为false，捕获，如果设置为true那么即为冒泡。此时，由于是冒泡，所以会从最精确的开始实现，再点击最内层盒子时，即打印 3 2 1. 他最先实现盒子最内层的事件。

2. 事件捕获 那么同理，有前面介绍可以得知，当不设置addEventListener第三个参数的时候，或者设置其第三个参数为false的时候，即为事件捕获。事件捕获，即为一步一步找到最精确的那一个，也就是从容器的最外层开始实现事件，最后实现最精确的那一个。

所以单事件捕获时，打印结果为1 2 3.在日常的开发中两者都会有所涉及，就看使用情况不同而不同。

那么又时候我们不想要事件冒泡，只想实现最精确的盒子的事件而不想实现外层盒子的事件该怎么办呢？

3. 阻止事件冒泡

 stopPropagation()
  event.stopImmediatePropagation()

这两个时间均可以阻止事件冒泡，从而达到在点击多层盒子时，只想要点击内层盒子时的效果。

4. 阻止事件捕获

event.stopImmediatePropagation()

那么在开发中有希望阻止事件冒泡的方法，自然也有阻止事件捕获的方法。event.stopImmediatePropagation()这个方法既可以阻止事件冒泡又可以阻止事件捕获。

本人是萌新小白，如果有说的不好的地方，希望大佬多多指正，感谢各位技术大牛。