JavaScript事件处理程序执行顺序 [英] JavaScript event handlers execution order

问题描述

  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（）触发的，还是可以是随机的？

标准化的行为，而不是目前实现的浏览器。

解决方案

警报将按顺序执行 - 1 然后 2 。这是因为单击事件是同步的（请参阅这里） - 当 .click（）被发出时，处理程序将立即运行（看最后一段< a href =http://www.w3.org/TR/DOM-Level-3-Events/#event-flow =nofollow> 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'）; 
  

将产生与

<$ p相同的结果$ p> 警报（ '1'）;
alert（'2'）;
alert（'3'）;


Having this JS code:

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

I'm wondering in what order will the alerts show up - will it be in the order the events were triggered by click() or could it be random?

I'm asking about documented/standardised behaviour, not about what browsers currently implement.

解决方案

The alerts will be executed in order - 1 and then 2. This is because click event is synchronous (see here) - when .click() is issued the handler will be run immediately (look at the last paragraph here). So this code:

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

will produce the same result as

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

这篇关于JavaScript事件处理程序执行顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！