2011-08-16 56 views
7

有了这个JS代码:JavaScript事件处理程序的执行顺序

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()的顺序或可能是随机的?

我在询问文档化/标准化的行为,而不是关于浏览器目前实现的功能。

+0

'点击();'将无法正常工作,顺便;那不是发射事件的方式。你需要使用'createEvent','initEvent'和'dispatchEvent'。 –

+1

不,我不知道。 http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361 –

+0

在这种情况下,没关系,但是这种射击事件的方法远远不是普遍的,所有元素上的事件。发射事件的唯一可靠方法是使用上面提到的三种方法。 –

回答

2

警报将按顺序执行 - 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'); 
+0

http://www.w3.org/TR/DOM-Level-3-Events/#sync-async +50如承诺 –

-1

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

+0

不确定在点击e1之前e2点击如何触发警报? –

+0

由于事件处理程序在执行'click()'时不会立即运行。之后他们会跑“一段时间” - 可能会有不同的顺序。 –

+0

@maarons - 第二个必须在第一个之后调用。唯一的弱点可能是,如果在第二条语句调用第一条语句之前,第一条语句的冒泡会导致另一个语句被调用。但在这种情况下,它将被调用两次,并且始终在第一次之后。如果侦听器被设置为在捕获阶段触发,事情可能会不同,但这不是代码正在做的事情。 – RobG