事件流程冒泡和捕获的观察和禁止

事件流程

1. 事件捕获
   事件从最不精确的元素开始执行，一层层往下，直到最精确的元素。
   点击最精确元素，如图：
   需要注意的是，捕获事件的观察需要将dom2级绑定的第三个参数填写为true（默认为false——冒泡行为）。
   

let bigBox = document.getElementById("bigBox")
let box1 = document.getElementById("box1")
let box1_1 = document.getElementById("box1_1")
bigBox.addEventListener("click", function() {
  console.log("bigBox")
}, true)
box1.addEventListener("click", () => {
  console.log("box1")
}, true)
box1_1.addEventListener("click", () => {
  console.log("box1_1")
}, true)

2. 事件冒泡
   事件从最精确的元素开始执行，一层层往上，直到最不精确的元素。
   在最精确元素事件被执行的时候，是不区分捕获和冒泡的，而是按照绑定顺序执行。
   点击最内方块，如图。
   
   点击中间层（灰黑色方块），如图，此为冒泡。
   

阻止冒泡

e.stopPropagation();