冒泡和捕获

冒泡(bubbling)

当一个事件发生在一个元素上，他会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先的处理程序。

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

点击内部的 <p> 会首先运行 onClick:

1. 在该 <p>上的
2. 然后是外部的 <div>上的
3. 然后外部 <form>上的
4. 以此类推，直到最后的 document对象

！注意 ！

几乎 所有的事件都会冒泡

几乎！！

例如，focus事件不会冒泡。

event.target

引发事件的那个嵌套层级最深的元素被称为目标元素，通过 event.target访问

注意与 this(=event.currentTarget)之前的区别：

• event.target——触发事件的目标元素，它在冒泡过程中不会发生变化。就是事件写在哪个位置这个就指向哪
• this——是“当前”元素，其中有一个当前正在运行的处理程序。

例子直接看https://zh.javascript.info/bubbling-and-capturing#eventtarget，非常生动，一看就懂了

停止冒泡

event.stopPropagation(): 停止向上移动，但是当前元素的其他处理程序都会继续运行

event.stopImmediatePropagation()：可以用于阻止冒泡，并阻止当前元素上的处理程序运行。

通常，没有真正的必要去阻止冒泡

捕获

很少用于实际开发中，但有时是有用的。

DOM事件标准描述了事件传播的3个阶段：

• 捕获阶段(Capturing phase)——事件(从Window)向下走向元素
• 目标阶段(Target phase)——事件到达目标元素
• 冒泡阶段(Bubbling phase)——事件从元素上开始冒泡

addEventListener第三个参数设置为 false(默认值),则在冒泡阶段执行处理程序

！要移除处理程序，removeEventListener需要同一阶段

！同一元素的同一阶段的监听器按其设置顺序运行

原文：https://zh.javascript.info/bubbling-and-capturing