Javascript中绑定到事件的函数的执行顺序答案

【问题标题】：Order of execution of functions bound to an event in JavascriptJavascript中绑定到事件的函数的执行顺序
【发布时间】：2015-04-13 09:30:16
【问题描述】：

我正在搜索有关在 javascript 中绑定到页面事件的函数的执行顺序的详细信息，例如通过 EventListener。

例如，如果我将三个函数 A()、B() 和 C() 绑定到同一个事件（比如 DOMContentLoaded），这三个函数的执行顺序是什么？ JS代码中根据addEventListener调用的顺序一一对应？还是同时执行？

另外，我可以修改这个订单吗？例如，有一个绑定到 DOMContentLoaded 事件侦听器的函数，在绑定到同一事件的任何其他函数之前执行。

【问题讨论】：

谢谢大家的回答；我了解执行顺序基于 addEventListener 调用的顺序。但是，当页面触发 DOMContentLoaded 事件时，如何确定我的函数将是第一个被调用的函数？我应该把 js 脚本 before 放在页面上吗？脚本是内联文件还是外部文件这一事实是否会有所不同？
除非你控制页面你不知道之前是否添加了另一个事件监听器。这个问题有多种检查方法，似乎有一个可以检查的功能，但它可能只在开发者控制台stackoverflow.com/a/16544813 中工作。希望开发者控制台可以在外部使用。

标签： javascript dom browser

【解决方案1】：

事件处理程序总是按照它们注册的顺序被调用。

一旦注册，您就不能在它们之前插入额外的处理程序[*]。

[*] 除非您能够获取所有处理程序及其EventListener 对象的列表，并调用removeEventListener 删除它们，插入您自己的，然后重新插入原件。在实践中，这可能是不可能的。

【讨论】：

在 DOM2 中，规范明确指出，附加到元素的处理程序被调用的顺序是不能保证的；但是 DOM3 改变了这一点，说处理程序按照它们注册的顺序被调用。
你能给个DOM3规范的链接吗？谢谢。
@QianChen FYI MDN 上没有按执行顺序列出任何内容developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

【解决方案2】：

var listeners = [];

//add listeners in whatever order you want them executed

document.addEventListener("DOMContentLoaded", function(event) {
    for (var i = 0; i < listeners.length; i++) {
        listeners[i]();
    }
});

【讨论】：