捕获和冒泡

Question

如题所述

Answer 1

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

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

addEventListener有三个参数：

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

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

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

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

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