javascript - 如何确保EventListener最后执行？

Question

我想要一个添加到 EventTarget 的特定 EventListener 最后执行(但在默认操作之前)独立于它们注册的顺序，附加约束是事件不可取消，意味着只能触发一次才能达到此目的。

我已经尝试在事件监听器中使用 .addEventListener，但这只会注册一个要在下次事件发生时执行的 EventListener，而不是在当前处理期间执行。不幸的是，EventListenerList 从未成为 DOM 规范的一部分，这意味着它也不是使用 .stopImmediatePropagation 并在执行最后要完成的操作之前手动执行其他事件的选项。

我不是在寻找它们的执行顺序，我知道现代浏览器引擎按照注册的顺序执行事件监听器。我正在询问绕过该行为的方法(可能仅在结果中)。

对此的具体需求是在内容脚本中(这意味着我无法控制添加的其他事件监听器(或发生的顺序))，该脚本会在使用 URL 之前重写它们 - 但是某些页面具有这样做的事件监听器他们在同一事件中自己重写。

当前行为的示例:

// The content script:
document.getElementById("target").addEventListener("click",last);

function last() {
  this.innerHTML="Correct!";
  console.log("This is supposed to occur last.")
}


// The webpage:
document.getElementById("target").addEventListener("click",first);

function first() {
  this.innerHTML="Incorrect!";
  console.log("This is supposed to occur first.")
}

<button id="target">
Click me!
</button>

Answer 1

实现此目的的一个简单但绝不完全合理的方法是将您希望最后发生的事件包装在 setTimeout() 中。这将导致其执行延迟。当然，如果其他事件监听器中还有其他异步函数，您可能无法完全预测所需的延迟:

function last() {
  setTimeout( () => {
   this.innerHTML=("Correct!");
   console.log("This is supposed to occur last.")
  })
}


// The webpage:

document.getElementById("target").addEventListener("click",last);
document.getElementById("target").addEventListener("click",first);



function first() {
  this.innerHTML="Incorrect!";
  console.log("This is supposed to occur first.")
}

<button id="target">
Click me!
</button>