# 事件冒泡和捕获

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

`event.target`**是当前点击的元素**

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

## 事件冒泡

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

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

* stopPropagation

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

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

## 事件捕获

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

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

```markup
<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](https://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
* [javascript.info Bubbling and capturing](https://javascript.info/bubbling-and-capturing)
