事件可以在两种情况下被激活:在开始(“捕获”)和在结束(“气泡”)。 事件按照它们的定义顺序执行。比如，你定义了4个事件监听器:

窗口。addEventListener("点击"，function(){console.log(1)}， false); 窗口。addEventListener("点击"，function(){console.log(2)}， true); 窗口。addEventListener("点击"，function(){console.log(3)}， false); 窗口。addEventListener("点击"，function(){console.log(4)}， true);

日志消息将按以下顺序显示:

2(首先定义，使用capture=true) 4(使用capture=true定义秒) 1(第一个定义的事件与capture=false) 3(捕获的第二个定义事件=false)

捕获事件(useCapture = true) vs泡沫事件(useCapture = false)

MDN参考

Capture Event将在Bubble Event之前分派 事件传播顺序为 父母捕获 孩子捕捉 目标捕获和目标气泡 按登记的顺序 当元素是事件的目标时，useCapture参数不重要(谢谢@bam和@legend80s) 孩子泡沫 父母泡沫 stopPropagation()将停止流

Demo

结果:

父母捕获 目标泡沫1 (因为目标的捕获和气泡将按照它们注册的顺序触发，所以这是优先触发) 目标捕获 目标泡沫2 父母泡沫

var parent = document.getElementById('parent'); var target = document.getElementById('target'); // "target" will trigger in the order of register (addEventListener()), capture / bubble don't affect the order // #2 target.addEventListener('click', function (e) { console.log('Target Bubble 1'); // e.stopPropagation(); }, false); // #3 target.addEventListener('click', function (e) { console.log('Target Capture'); // e.stopPropagation(); }, true); // #4 target.addEventListener('click', function (e) { console.log('Target Bubble 2'); // e.stopPropagation(); }, false); // #1 : "parent capture" first parent.addEventListener('click', function (e) { console.log('Parent Capture'); // e.stopPropagation(); }, true); // #5 : "parent bubble" last parent.addEventListener('click', function (e) { console.log('Parent Bubble'); // e.stopPropagation(); }, false); <div id="parent"> <button id="target" style="padding: 1em 0.8em;"> Trigger event </button> </div>

事件可以在两种情况下被激活:在开始(“捕获”)和在结束(“气泡”)。 事件按照它们的定义顺序执行。比如，你定义了4个事件监听器:

窗口。addEventListener("点击"，function(){console.log(1)}， false); 窗口。addEventListener("点击"，function(){console.log(2)}， true); 窗口。addEventListener("点击"，function(){console.log(3)}， false); 窗口。addEventListener("点击"，function(){console.log(4)}， true);

日志消息将按以下顺序显示:

2(首先定义，使用capture=true) 4(使用capture=true定义秒) 1(第一个定义的事件与capture=false) 3(捕获的第二个定义事件=false)

给定事件传递的三个阶段:

捕获阶段:事件被分派到目标的祖先，从树的根到目标的直接父 节点。 目标阶段:事件被分派到目标节点。 冒泡阶段:将事件从目标节点的直接父节点分派到目标节点的根节点 树。

useCapture指示事件旅行将在哪个阶段:

如果为true, useCapture表示用户希望添加事件 监听器仅用于捕获阶段，即此事件监听器不会 在目标和冒泡阶段触发。如果为false，则 事件监听器只会在目标和冒泡期间被触发 阶段

来源与第二个最佳答案相同:https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

我发现这张图对于理解捕获/目标/气泡阶段非常有用: http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

下面是从链接中提取的内容。

阶段

事件按照从树的根到目标节点的路径分派。然后，可以在目标节点级别本地处理它，也可以从树中更高级别的任何目标的祖先处理它。事件分派(也称为事件传播)发生在三个阶段，顺序如下:

捕获阶段:事件被分派到目标的祖先 从树的根到目标节点的直接父节点。 目标阶段:事件被分派到目标节点。 冒泡阶段:事件被分派到目标阶段 从目标节点的直接父节点到根节点的祖先 这棵树。

目标的祖先在事件的初始分派之前确定。如果在调度期间删除了目标节点，或者添加或删除了目标的父节点，则事件传播将始终基于调度之前确定的目标节点和目标的父节点。

有些事件可能不一定完成DOM事件流的三个阶段，例如，事件只能为一个或两个阶段定义。例如，本规范中定义的事件将始终完成捕获和目标阶段，但有些事件不会完成冒泡阶段(“冒泡事件”与“非冒泡事件”，请参见事件。泡沫属性)。

代码示例:

<div id="div1" style="background:#9595FF">
  Outer Div<br />
  <div id="div2" style="background:#FFFFFF">
    Inner Div
  </div>
</div>

Javascript代码:

d1 = document.getElementById("div1");
d2 = document.getElementById("div2");

如果两者都设置为false

d1.addEventListener('click',function(){alert("Div 1")},false);
d2.addEventListener('click',function(){alert("Div 2")},false);

执行:在单击Inner Div时，警报显示为: Div 2 > Div 1

这里脚本是从内部元素执行的:

Div 1设置为true, Div 2设置为false

d1.addEventListener('click',function(){alert("Div 1")},true);
d2.addEventListener('click',function(){alert("Div 2")},false);

执行:在单击Inner Div时，警报显示为: Div 1 > Div 2

这里脚本是从祖先/外部元素执行的:

Div 1设置为false, Div 2设置为true

d1.addEventListener('click',function(){alert("Div 1")},false);
d2.addEventListener('click',function(){alert("Div 2")},true);

执行:在单击Inner Div时，警报显示为: Div 2 > Div 1

这里脚本是从内部元素执行的:

Div 1设置为true, Div 2设置为true

d1.addEventListener('click',function(){alert("Div 1")},true);
d2.addEventListener('click',function(){alert("Div 2")},true);

执行:在单击Inner Div时，警报显示为: Div 1 > Div 2

这里脚本从祖先/外部元素执行:事件捕获，因为useCapture已设置为true