JavaScript事件处理程序的执行顺序

Question

以下是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()触发事件的顺序还是随机的？

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

- Marek Sapota

---

顺便说一下，click();不起作用；那不是触发事件的方法。您需要使用createEvent、initEvent和dispatchEvent。 - Delan Azabani

不，我没有。http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361 - Marek Sapota

在这种情况下，这种触发事件的方法还远非所有元素上的所有事件都能使用。唯一可靠的触发事件的方法是使用我上面提到的三种方法。 - Delan Azabani

实际上在HTML5中，您可以在任何元素上使用click事件 http://www.w3.org/TR/html5/elements.html#htmlelement 但我同意它目前并不被所有浏览器普遍支持。 - Marek Sapota

也不是创建/调度事件。 - RobG

Answer 1

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

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');

- Marek Sapota

Answer 2

我将先是1，然后是2。 http://jsfiddle.net/kkYfX/

- Anil Shanbhag

---

不确定为什么在e1点击之前e2点击能够触发警报？ - Anil Shanbhag

因为事件处理程序不会在执行click()时立即运行，它们会在此之后的“某个时间”运行，可能会以不同的顺序运行。 - Marek Sapota

@maarons - 第二个必须在第一个之后调用。唯一的小毛病可能是，如果第一个的冒泡导致在第二个语句调用之前就被调用了。但在这种情况下，它将被调用两次，并且始终在第一个之后。如果侦听器设置为在捕获阶段触发，那么情况可能会有所不同，但这不是代码正在执行的操作。 - RobG