JavaScript 事件处理程序在元素上单独触发的事件的执行顺序，其中两个元素都不是另一个的祖先

发布于 2024-11-29 23:11:00 字数 419 浏览 0 评论 0原文

有了这个 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() 触发事件的顺序还是随机的？

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静若繁花 2024-12-06 23:11:01

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

回复收藏 0 原文

清浅ˋ旧时光 2024-12-06 23:11:00

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

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