捕获阶段（capture phase）
捕获阶段的定义如下(w3c)：The event object propagate through the target's ancestors from the defaultView to the target's parent.
事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。
捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层地捕获。 文章开头的例子里面，捕获阶段的click事件会依次在document、body、div上触发：
document 1 vbody 2 vdiv 3 vbutton
一般没太大需要监听捕获阶段的事件；如果确实希望这么做，需要将
addEventListener的第三个参数设置为true： // 第三个参数设置是否为捕获阶段，默认为falseelement.addEventListener('click', function() {}, true) 目标阶段（target phase）
目标阶段的定义是（w3c）：The event object arrive at the event object's event target.事件对象到达事件目标。
例子里面，就是事件在button上触发的。addEventListener可以监听目标阶段的事件：
element.addEventListener('click', function() {}) 如果事件是不可冒泡的，那整个事件流动会到此为止，不会发生下面的冒泡阶段。
冒泡阶段（bubble phase）
冒泡阶段的定义（w3c）：The event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView.
事件对象会在事件目标的祖先元素里反向传播，由开始的父元素到最后的defaultView（document）。
冒泡阶段发生在最后，在这阶段里事件会从子（分支）到父（主干）逆向传播，看起来像是一个水里的泡泡往上冒。
例子里面，冒泡阶段的click事件会依次在div、body、document上触发：document 3 ^body 2 ^div 1 ^button
"bubbles"
Event下的bubbles属性标明该事件是否为可冒泡的。一旦该值为false，则说明 evnet不可冒泡，那其流动也会在第二阶段“目标阶段”后就终止。
摘自： 作者：butterandfly 链接：https://www.jianshu.com/p/382895a4027d 來源：简书 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处