当你说useCapture = true时，事件在捕获阶段从上到下执行，当为false时，它会从下到上进行冒泡。

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

简介:

DOM规范描述如下:

https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

工作方式如下:

事件按照从树的根(文档)到目标节点的路径分派。目标节点是最深的HTML元素，即event.target。事件分派(也称为事件传播)发生在三个阶段，顺序如下:

捕获阶段:将事件从树(文档)的根分发到目标节点的直接父节点。 目标阶段:事件被分派到目标节点。目标阶段始终位于分离事件的最深的html元素上。 冒泡阶段:将事件从目标节点的直接父节点分派到树的根节点。

例子:

// bubbling handlers, third argument (useCapture) false (default) document.getElementById('outerBubble').addEventListener('click', () => { console.log('outerBubble'); }, false) document.getElementById('innerBubble').addEventListener('click', () => { console.log('innerBubble'); }, false) // capturing handlers, third argument (useCapture) true document.getElementById('outerCapture').addEventListener('click', () => { console.log('outerCapture'); }, true) document.getElementById('innerCapture').addEventListener('click', () => { console.log('innerCapture'); }, true) div:hover{ color: red; cursor: pointer; } <!-- event bubbling --> <div id="outerBubble"> <div id="innerBubble">click me to see Bubbling</div> </div> <!-- event capturing --> <div id="outerCapture"> <div id="innerCapture">click me to see Capturing</div> </div>

上面的例子真正说明了事件冒泡和事件捕获之间的区别。当使用addEventListener添加事件监听器时，有第三个元素叫做useCapture。这是一个布尔值，当设置为true时，允许事件监听器使用事件捕获而不是事件冒泡。

在我们的例子中，当我们将useCapture参数设置为false时，我们看到发生了冒泡事件。首先触发目标阶段的事件(记录innerBubble)，然后通过事件冒泡触发父元素中的事件(记录outerBubble)。

当我们将useCapture参数设置为true时，我们看到外部<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)

代码示例:

<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

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

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

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

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