为何使用{once: true}事件监听器时console.trace()栈追踪会增长？

代码示例 #

JavaScript 代码 #

let btn = document.querySelector("button");
btn.addEventListener("click", foo, { once: true });

function foo() {
  btn.addEventListener("click", bar, { once: true });
  console.log("Foo called");
  console.trace();
}

function bar() {
  btn.addEventListener("click", buz, { once: true });
  console.log("Bar called");
  console.trace();
}

function buz() {
  btn.addEventListener("click", foo, { once: true });
  console.log("Buz called");
  console.trace();
}

HTML 代码 #

<button>Click</button>

实际输出 #

Foo called index.html:11:17
foo file:///.../index.html:12
    (Async: EventListener.handleEvent)

Bar called index.html:16:17
bar file:///.../index.html:17
    (Async: EventListener.handleEvent)
foo file:///.../index.html:10
    (Async: EventListener.handleEvent)

Buz called index.html:21:17
buz file:///.../index.html:22
    (Async: EventListener.handleEvent)
bar file:///.../index.html:15
    (Async: EventListener.handleEvent)
foo file:///.../index.html:10
    (Async: EventListener.handleEvent)

预期输出 #

Foo called index.html:11:17
foo file:///.../index.html:12
    (Async: EventListener.handleEvent)

Bar called index.html:16:17
bar file:///.../index.html:17
    (Async: EventListener.handleEvent)

Buz called index.html:21:17
buz file:///.../index.html:22
    (Async: EventListener.handleEvent)

可以看到，触发Bar时栈帧有2个，触发Buz时栈帧有3个，为何会出现栈追踪不断增长的现象？

这是浏览器**异步栈追踪（Async Stack Traces）**机制导致的——它会保留异步操作的因果调用链，而非只记录当前事件的直接执行栈。

具体逻辑如下：

• 第一次点击触发foo，console.trace()记录的是foo被点击事件触发的直接上下文。
• foo内部调用addEventListener注册了bar作为下一次点击的监听器。当第二次点击触发bar时，浏览器会把“foo注册了bar”这个因果关系纳入异步调用链，所以栈追踪里会同时显示bar和foo的调用记录。
• 同理，第三次点击触发buz时，浏览器会依次追溯到“bar注册了buz”、“foo注册了bar”这两层因果关系，因此栈帧会比之前多一层。

简单说，浏览器的console.trace()不仅会显示当前事件监听器的执行栈，还会往上追溯是谁注册了这个监听器，把整个注册链的上下文都展示出来，目的是方便开发者调试异步代码的完整执行路径。

如果想得到预期的输出，要明白这是浏览器调试工具的正常行为；如果确实需要切断这个上下文，可以通过将新监听器的注册放在setTimeout这类会开启新异步任务的API里，打破当前的调用链关联。

内容的提问来源于stack exchange，提问作者LNTR