定义的顺序只在项目处于同一级别时才起作用。如果你在你的代码中颠倒定义的顺序，你会得到相同的结果。

但是，如果反转两个事件处理程序上的useCapture设置，子事件处理程序将在父事件处理程序之前响应。这样做的原因是，子事件处理程序现在将在捕获阶段被触发，该阶段先于触发父事件处理程序的冒泡阶段。

如果您将两个事件处理程序的useCapture设置为true——不管定义的顺序如何——父事件处理程序将首先被触发，因为在捕获阶段它出现在子事件处理程序之前。

相反，如果您将两个事件处理程序的useCapture设置为false——同样不考虑定义的顺序——子事件处理程序将首先被触发，因为在冒泡阶段它出现在父事件处理程序之前。

定义的顺序只在项目处于同一级别时才起作用。如果你在你的代码中颠倒定义的顺序，你会得到相同的结果。

但是，如果反转两个事件处理程序上的useCapture设置，子事件处理程序将在父事件处理程序之前响应。这样做的原因是，子事件处理程序现在将在捕获阶段被触发，该阶段先于触发父事件处理程序的冒泡阶段。

如果您将两个事件处理程序的useCapture设置为true——不管定义的顺序如何——父事件处理程序将首先被触发，因为在捕获阶段它出现在子事件处理程序之前。

相反，如果您将两个事件处理程序的useCapture设置为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>

都是关于事件模型的:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow 您可以在冒泡阶段或捕获阶段捕获事件。你的选择。 看看http://www.quirksmode.org/js/events_order.html，你会发现它非常有用。

事件可以在两种情况下被激活:在开始(“捕获”)和在结束(“气泡”)。 事件按照它们的定义顺序执行。比如，你定义了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)

代码示例:

<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