事件冒泡和捕获

这里开始，先搞清两个点.event.target和event.currentTarget.

event.target是当前点击的元素

event.currentTarget也就是this, 是绑定函数操作的元素

事件冒泡

就是一个事件(例如点击)，这个点击会往上层元素进行冒泡(往上进行)，他是从点击的这个元素(目标元素，即event.target)开始向上去冒泡。

有的时候你可能并不想他去冒泡，可以通过stopPropagation这个方法去干掉他。

• stopPropagation

这个方法有个地方需要注意一下，那就是当一个事件有多个处理程序的时候，他只会停止当前程序的冒泡，其他的程序不会收到影响，需要解决这个问题，就需要使用到stopImmediatePropagation方法。

尽量不要阻止事件冒泡，除非你知道你自己在干什么。

事件捕获

事件捕获和事件冒泡是不同的，捕获是从上而下。如果需要捕获事件，那就需要将addEventListener的第三个参数(叫做useCapture)设置成true.

默认的false是在冒泡阶段处理事件，true就是捕获阶段处理事件。看下面的代码：

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

<script>
  for(let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => alert(`Capturing: ${elem.tagName}`), true);
    elem.addEventListener("click", e => alert(`Bubbling: ${elem.tagName}`));
  }
</script>

运行之后，发现两个顺序是相反的。而且点击的元素是位于捕获阶段的最后，冒泡阶段的开始。

参考：

• w3c

• javascript.info Bubbling and capturing