Day.24 「你点了按钮～同时也点了网页本身！」 —— JavaScript 事件冒泡（Event bubbling）

我们上一个篇章认识了绑定事件，了解到不管是什麽节点，都可以绑定事件

那为什麽 JavaScript 会知道我们触发事件？

事件触发流程

当我们点击网页中任何一个元素，是不是也等於点击到网页本身！
而点击元素与网页本身这个过程是有顺序的，称为事件流程，事件流程共有两个机制：

事件捕获
事件冒泡

事件捕获（Event Capturing）

事件捕获

当我们点击蓝色的 div 时，网页会从根目录开始往下找到我们点击的元素，这个过程称为事件捕获

事件冒泡（Event Bubbling）

而事件冒泡则刚好反过来！

事件冒泡

当我们点击蓝色的 div 时，会从我们点击的元素往上传递到根目录，这个过程称为事件捕获

而如何确认冒泡的情况是否发生？

就把每个元素都绑上 onclick 点击事件，连 body 也绑定。

<div class="box parent red" id="red">
  <div class="box child green" id="green">
  </div>
  <div class="box child blue" id="blue">
  </div>
</div>

// 绑定元素
const body = document.body;
const red = document.getElementById("red");
const green = document.getElementById("green");
const blue = document.getElementById("blue");


// 绑定监听
body.onclick = function(){
  console.log("I'm body");
}
red.onclick = function(){
  console.log("I'm parent red");
}
green.onclick = function(){
  console.log("I'm child green");
}
blue.onclick = function(){
  console.log("I'm child blue");
}

这时点击蓝色 div 就会触发事件冒泡，会看到先出现蓝色依序往根标签传递，而因为没点击绿色，所以绿色不会触发！

"I'm child blue"
"I'm parent red"
"I'm body"

在大部分情况下，冒泡事件都是有用的，例如：拖曳功能，如果不希望冒泡事件触发，可以针对触发事件元素取消冒泡事件

blue.onclick = function(event){
  event = event || window.event;  // 避免找不到 event
  console.log("I'm child blue");
  
  event.cancelBubble = true;  // 取消冒泡事件
}

这样点击就只会触发蓝色的事件，不会往上触发了！