JavaScript 事件流（事件捕获、事件冒泡）

JavaScript 事件处理程序

---

<div id="item1">item1
  <div id="item2">item2
    <div id="item3">item3</div>
  </div>
</div>

<script>
  document.querySelector('#item3').addEventListener('click',(e)=>{
    e.stopPropagation()
    console.log('3')
  })
  document.querySelector('#item2').addEventListener('click',()=>{
    console.log('2')
  })
  document.querySelector('#item1').addEventListener('click',()=>{
    console.log('1')
  },true)
</script>

先看上面一个小练习，点击"#item3"元素，会输出什么呢？

事件流

1. 事件捕获

事件捕获认为某个事件发生时，父元素最先接收到事件，目标元素（事件发生所在的节点）最后接收到事件。

开启事件捕获

事件捕获默认关闭。可以通过设置事件处理程序的第三个参数为true，达到到事件捕获阶段处理事件的目的。

document.querySelector('#item2').addEventListener('click',()=>{
  console.log('2')
},true)

2. 事件冒泡

事件冒泡认为事件发生时，目标元素先接受到事件，再逐级传播到父元素。

阻止事件冒泡

事件冒泡默认开启。阻止事件冒泡用事件对象的 stopPropagation 方法。

event.stopPropagation();

3. 事件流及示例

事件流即页面接受事件的顺序: 捕获阶段 => 目标阶段 => 冒泡阶段

如图，点击 item3 元素，事件流执行顺序为 1=>2=>3=>2=>1（1、2、3分别代表item1、…三个元素的点击事件）。

因为事件处理程序默认在事件冒泡阶段执行，所以默认执行的事件顺序为：3=>2=>1。

如果给 item2 元素设置在事件捕获阶段执行事件处理程序，那么点击元素 item3 后，事件执行顺序为：2=>3=>1

如果再给 item2 元素设置阻止事件冒泡，那么点击元素 item3 后，只会执行事件2。

文章开头的那个小练习你做对了吗？