捕获和冒泡

捕获：从外向内
冒泡：从内向外

在一个事件发生时，捕获过程跟冒泡过程总是先后发生，跟你是否监听毫无关联，先捕获后冒泡。

addEventListener有三个参数：

• 事件名称
• 事件处理函数
• 是否捕获（true为捕获，false为冒泡，默认为false）

document.body.addEventListener('click', eventHandler, true)

当我们实际监听事件时，默认使用冒泡模式，当开发组件时，需要通过父元素控制子元素的行为，可以使用捕获机制。

阻止冒泡和取消默认事件

1. 阻止冒泡
   方法：event.stopPropagation()

点击

javascript:
document.body.addEventListener('click', (event) => {
  event.stopPropagation();
  console.log('捕获阶段：body');
}, true);
document.getElementById('btn').addEventListener('click', (event) => {
  console.log('捕获阶段：button');
}, true);
document.body.addEventListener('click', (event) => {
  console.log('冒泡阶段：body');
}, false);
document.getElementById('btn').addEventListener('click', (event) => {
  console.log('冒泡阶段：button');
}, false);

如果没有加event.stopPropagation()的话，执行顺序应该是：
捕获阶段：body
捕获阶段：button
冒泡阶段：button
冒泡阶段：body

但是在捕获阶段的body层事件处理方法内增加了event.stopPropagation()的话，执行顺序就变成了：
捕获阶段：body

由此可得，在上面正常执行顺序的任意一层，增加event.stopPropagation()，那么原本跟在它后面执行的事件都会被阻止

因为事件执行到了捕获阶段body层后，被阻止了，该事件不会再向内或向外执行。

2. 取消默认事件
   方法：event.preventDefault()
   作用：取消一个目标元素的默认行为，例如：a标签的链接跳转行为