事件冒泡与捕获

1、事件冒泡与捕获

JavaScript 事件分为三个阶段：

• 捕获阶段：事件从父元素开始向目标元素传播，从 Window 对象开始传播。
• 目标阶段：该事件到达目标元素或开始该事件的元素。
• 冒泡阶段：这时与捕获阶段相反，事件向父元素传播，直到 Window 对象。

事件冒泡

事件会从最内层的元素开始发生，一直向上传播，直到document对象。

因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是：

p -> div -> body -> html -> document

事件捕获

与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

上面的例子在事件捕获的概念下发生click事件的顺序应该是：

document -> html -> body -> div -> p

事件冒泡和事件捕获过程图：

==先捕获、后冒泡==

1-5是捕获过程，5-6是目标阶段，6-10是冒泡阶段；

2、addEventListener 的第三个参数

element.addEventListener(event, function, useCapture)

• true - 事件句柄在捕获阶段执行（即在事件捕获阶段调用处理函数）
• false– 默认。事件句柄在冒泡阶段执行（即表示在事件冒泡的阶段调用事件处理函数）

阻止事件冒泡

• event.stopPropagation( )
• 在事件处理函数中返回 false

但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身(默认事件)。event.stopPropagation()则只阻止事件往上冒泡，不阻止事件本身。

先冒泡后捕获

1.根据w3c标准，应先捕获再冒泡。若要实现先冒泡后捕获，给一个元素绑定两个addEventListener，其中一个第三个参数设置为false（即冒泡），另一个第三个参数设置为true（即捕获），调整它们的代码顺序，将设置为false的监听事件放在设置为true的监听事件前面即可。

2.还有一种，在执行捕获时，设置setTimeOut(方法名，0)，把它放到下一个宏任务