为什么滚动上的事件侦听器在 window 上不起作用

Question

我有一个带有属性overflow: auto ，因此，滚动事件仅在此块中触发，尽管我向window object 添加了一个侦听器。

如果我不知道发生事件的特定块的 class 或 id，如何向 window 添加滚动事件侦听器？

 window.addEventListener('scroll', () => { console.log('scroll;') });

 * { margin: 0; padding: 0; } main { height: 100vh; overflow-y: auto; } div { width: 500px; height: 300px; margin: 10px 0; background: rgb(45, 62, 206); }

 <main> <div></div> <div></div> <div></div> <div></div> </main>

Answer 1

我和 Rory 在一起，这似乎是X/Y 问题。 但回答问题时问：

scroll事件不会冒泡，但您仍然可以通过为捕获阶段添加侦听器（ true作为addEventListener的第三个参数）在祖先元素上处理它们。 即使对于不冒泡的事件，也会发生捕获阶段：

window.addEventListener('scroll', () => {
  console.log('scroll!')
}, true); // <===

现场示例：

 window.addEventListener('scroll', () => { console.log('scroll,') }; true);

 * { margin: 0; padding: 0; } main { height: 100vh; overflow-y: auto; } main div { width: 500px; height: 300px; margin: 10px 0; background: rgb(45, 62, 206); }

 <main> <div></div> <div></div> <div></div> <div></div> </main>

这张来自DOM UI 事件规范的图表有助于理解捕获、目标和冒泡阶段：

在没有冒泡的事件中，它只是冒泡阶段，而不是捕获阶段，不会发生。

---

（在可运行的示例中，我对与答案无关的 CSS 做了一个小改动；这只是为了让 Stack Snippet 工作得更好。Stack Snippet 控制台是文档中的一个 div，所以它受到你的div规则的影响。我只是将规则的选择器更改为main div ，因此它仅适用于main中的元素。）