addEventListener中的useCapture表现奇怪

Question

我正在尝试理解JavaScript中addEventListener()的useCapture参数。这是我的HTML代码：

<div id="wrapper">
    <button id="button">Click me</button>
</div>

这是我的JavaScript代码：

document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true);
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false);
document.getElementById('button').addEventListener('click', function () { console.log('Button bubble'); }, false);
document.getElementById('button').addEventListener('click', function () { console.log('Button capture'); }, true);

现在，我预期的顺序应该是Wrapper capture, Button capture, Button bubble, Button bubble。令人惊讶的是，这是我的输出结果：

Wrapper capture
Button bubble
Button capture
Wrapper bubble

两个按钮处理程序混淆了吗？我在其他浏览器中进行了测试，但Chrome，Firefox和IE10都显示相同的行为。这让我感到困惑。MDN, QuirksMode.org和规范都清楚地描述了不同阶段以及捕获阶段在冒泡阶段之前的方式。为什么我的小实验结果会导致 Button bubble 处理程序在 Button capture 之前被调用？

这是一个演示发生情况的Fiddle：http://jsfiddle.net/Tr7G6/2

---

// 更新 似乎附加处理程序的顺序很重要。

document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true);
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false);
document.getElementById('button').addEventListener('click', function () { console.log('Button capture'); }, true);
document.getElementById('button').addEventListener('click', function () { console.log('Button bubble'); }, false);

绑定事件时先捕获再冒泡能够产生我所期望的跨浏览器输出，但这很愚蠢。为什么顺序很重要？

- J.P.

Answer 1

冒泡/捕获只有在事件冒泡/捕获到目标元素时才相关，而不是在直接触发该元素上的事件时（这是W3C事件模型中的“目标阶段”）。如果没有“冒泡”或“捕获” - 例如在您的上的click事件 - 事件将按照添加它们的顺序进行处理。

例如，如果您颠倒"wrapper"上侦听器的顺序并单击包装器元素（而不是按钮），您会注意到相同的行为（冒泡将首先触发）：

// 1. "Wrapper Bubble" 2. "Wrapper Capture"
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper bubble'); }, false);
document.getElementById('wrapper').addEventListener('click', function () { console.log('Wrapper capture'); }, true);

然而，如果你按照相同的顺序（先冒泡再捕获），并点击按钮，则捕获会在冒泡之前触发。这是因为“click”事件被触发在按钮上，并在“冒泡”（正常的事件流）之前通过dom进行了“捕获”。

我创建了一个JSBIN，希望它能够帮助澄清这一点（但是，它可能会增加混淆）。 “ordered”按钮/ div触发你第一个片段的顺序，“unordered”按钮和div使用你第二个片段的顺序。

有关更多信息，请参见thisSO答案和W3C Event Flow文档，特别是Target Phase。

- Nick Tomlin

---

很好奇他们为什么选择忽略传递的任何优先级，只是因为“它毕竟在同一个元素上”。我在规范中找不到字面文本，但考虑到您的解释以及跨浏览器实现遵循此行为，这一定是真的！谢谢 :) - J.P.