JavaScript 事件处理程序执行顺序答案

【问题标题】：JavaScript event handlers execution orderJavaScript 事件处理程序执行顺序
【发布时间】：2011-10-27 23:27:01
【问题描述】：

有这个 JS 代码：

document.getElementById('e1').addEventListener('click', function(){alert('1');}, false);
document.getElementById('e2').addEventListener('click', function(){alert('2');}, false);
document.getElementById('e1').click();
document.getElementById('e2').click();

我想知道警报会按什么顺序显示 - 是按照 click() 触发事件的顺序还是随机的？

我问的是记录/标准化的行为，而不是浏览器当前实现的内容。

【问题讨论】：

顺便说一句，click(); 不起作用；这不是触发事件的方式。您需要使用createEvent、initEvent 和dispatchEvent。
不，我没有。 w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
在这种情况下，好的，但是对于所有元素上的所有事件而言，这种触发事件的方法远非通用。触发事件的唯一可靠方法是使用我上面提到的三种方法。
实际上在 HTML5 中，您可以在任何元素上使用 click w3.org/TR/html5/elements.html#htmlelement 但我同意目前浏览器并未普遍支持它。
哦，我不知道。谢谢！

标签： javascript events dom-events standards

【解决方案1】：

警报将按顺序执行 - 1，然后是 2。这是因为click 事件是同步的（请参阅here） - 当.click() 发出时，处理程序将立即运行（请参阅最后一段here）。所以这段代码：

document.getElementById('e1').addEventListener('click', function(){alert('1');}, false);
document.getElementById('e2').addEventListener('click', function(){alert('2');}, false);
document.getElementById('e1').click();
document.getElementById('e2').click();
alert('3');

将产生与

相同的结果

alert('1');
alert('2');
alert('3');

【讨论】：

【解决方案2】：

我会是 1 然后是 2 。 http://jsfiddle.net/kkYfX/

【讨论】：

不确定 e2 点击如何在 e1 点击之前触发警报？
因为在执行click() 时事件处理程序不会立即运行。之后它们会运行“一段时间”——可能是不同的顺序。
@maarons - 第二个必须在第一个之后调用。唯一的缺点可能是如果第一个冒泡导致另一个在第二个语句调用它之前被调用。但在这种情况下，它将被调用两次，并且总是在第一次之后。如果侦听器设置为在捕获阶段触发，情况可能会有所不同，但这不是代码所做的。