DOM事件流是什么？

什么是事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就叫做DOM事件流。

DOM事件流分为三个阶段：

1.捕获阶段：事件从window发出，自上而下向目标节点传播的阶段

2.目标阶段：真正的目标阶段正在处理事件的阶段

3.冒泡阶段：事件从目标节点自下而上向window传播的阶段

(注意⚠️：JS代码只能执行捕获或者冒泡其中一个阶段，要么是捕获要么是冒泡)

冒泡和捕获的具体过程

冒泡指的是：当给某个目标元素绑定了事件之后，这个事件会依次在它的父级元素中被触发(当然前提是这个父级元素也有这个同名称的事件，比如子元素和父元素都绑定了click事件就触发父元素的click)。

捕获则是从上层向下层传递，与冒泡相反。

举个例子

<!-- 会依次执行 button li ul -->
<ul onclick="alert('ul')">
  <li onclick="alert('li')">
    <button onclick="alert('button')">点击</button>
  </li>
</ul>
<script>
  window.addEventListener('click', function (e) {
    alert('window')
  })
  document.addEventListener('click', function (e) {
    alert('document')
  })
</script>

• 冒泡结果：button > li > ul > document > window
• 捕获结果：window > document > ul > li > button