Javascript 事件优先级答案

【问题标题】：Javascript Event PriorityJavascript 事件优先级
【发布时间】：2013-10-31 21:03:41
【问题描述】：

随着在 javascript 中添加事件的不同方式，它们中的任何一个都像 css 类那样优先吗？例如，内联 onclick 是否总是在添加 addEventListener 之前触发？

如果没有，有没有办法给事件优先级？

【问题讨论】：

只是不要混搭，总是在 JavaScript 中附加事件，问题就解决了。
啊，感谢到目前为止的所有回复。我问是因为我在 CMS 系统上安装插件。我不想修改根文件，因为它们一团糟。在某些情况下，我需要在图像交换后重新启动插件。我希望该功能交换图像，然后重新启动插件。我应该指定问题并询问它是否会先交换（内联事件）然后重新启动（addEventListenerEvent）？
@elclanrs 我绝对同意，不幸的是，在这种情况下，我只是用胶带覆盖现有的东西。
@MagicLasso 我不完全理解你的问题。插件是否使用AddEventListener() 将侦听器附加到正在交换的图像？
@Sniffer 我使用 addeventlistener 将初始化事件添加到元素。我需要它在现有的内联 onclick 事件触发后执行。尽管这主要是出于好奇，但它实际上运行良好。

【解决方案1】：

是的

内联 onclick 处理程序将绑定 DOM 正在加载

而您使用 .on 或 .addEventListener 添加的任何内容都必须等待 DOM 元素首先加载。

你的html

<a href="#" onclick="console.log('hello');">click</a>

你的 js（这里是 jQuery）

$(function() {
    $("a").click(console.log.bind(console, "world"));
});

输出

hello
world

说明

我不确定这会记录在哪里，但可以这样考虑。如果您要使用 DOM API 来查询元素，然后添加事件侦听器，则必须先加载该元素。如果该元素已包含 onclick 属性，则该属性已被首先附加。

【讨论】：

你能给出这个（文档）的参考吗？我从没想过这个概念，但一直认为这取决于他们在文档中声明的顺序。
是绑定代码的执行顺序，不是文档中的顺序。例如，内联事件是在浏览器解析 html 时绑定的，因此它们总是先行。虽然我不确定以后更改 onclick 属性会如何影响事情
@matewka，我添加了解释来解决您的评论。
感谢您的关注。仍然没有证据。您提供的 jQuery 在文档加载时进行评估，因此很明显“世界”函数将在“你好”之后被触发。当涉及到您的解释时 - 它仅说明事件侦听器不能绑定到不存在的元素。我会尝试做研究来确认你的想法。

【解决方案2】：

JavaScript 事件没有任何优先级。当事件被触发时，它会被添加到事件队列中并尽快执行。

您可以声称 onclick 属性事件总是首先触发是一般规则，这将永远是正确的，但这并不是因为它们具有优先级。

^{引自@Kevin B 的评论}

【讨论】：

这不是他要问的。他在问你是否有<a onclick="alert('a')"></a>，然后是$('a').click(function(){ alert('b'); })，哪个先发出警报？
对，但仍然没有优先级。这是先进先出。内联首先发生的原因是因为它是第一个被绑定的。
@RocketHazmat 我没有从那个角度看待它，我是按照 KevinB 的方式思考的。
您可以声称，onclick 属性事件总是最先触发是一般规则，而且这始终是正确的，但这并不是因为它们具有优先级。
@KevinB 如果您不介意，我在回答中引用了您的评论，因为我喜欢您的表述方式。