什么是被动事件监听器？

Posted 2023-02-19

【中文标题】什么是被动事件监听器？

【英文标题】：What are passive event listeners?

【发布时间】：2016-10-09 20:38:16

【问题描述】：

在努力提高渐进式 Web 应用程序的性能时，我发现了一个新功能 Passive Event Listeners，我发现很难理解这个概念。

Passive Event Listeners 是什么？在我们的项目中需要它吗？

【问题讨论】：

github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

【参考方案1】：

被动事件侦听器是一种新兴的 Web 标准、新功能 在 Chrome 51 中发布，为滚动提供了巨大的潜在推动力 表现。 Chrome Release Notes.

它使开发人员无需滚动即可阻止触摸和滚轮事件侦听器，从而选择加入以提高滚动性能。

问题：所有现代浏览器都具有线程滚动功能，即使在运行昂贵的 javascript 时也允许滚动流畅运行，但这种优化部分因需要等待任何 @ 的结果而失败987654326@ 和 touchmove 处理程序，可以通过在事件上调用 preventDefault() 来完全阻止滚动。

解决方案：passive: true

通过将触摸或滚轮侦听器标记为被动，开发人员承诺处理程序不会调用preventDefault 来禁用滚动。 This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

document.addEventListener("touchstart", function(e) 
    console.log(e.defaultPrevented);  // will be false
    e.preventDefault();   // does nothing since the listener is passive
    console.log(e.defaultPrevented);  // still false
, Modernizr.passiveeventlisteners ? passive: true : false);

DOM Spec、Demo Video、Explainer Doc

【讨论】：

所以我们应该总是添加这行代码（至少在大多数情况下），对吧？

这会导致 Mozilla 中的 js 引擎崩溃。您最好在附加此事件侦听器之前检测浏览器

@AltianoGerung 当浏览器推荐时。您将在控制台的信息或警告选项卡中看到该消息。

@yardpenalty.com 我们可以使用以下 polyfill 并避免浏览器检查。对于滚动用例，使用被动事件侦听器是一大优势。 github.com/WICG/EventListenerOptions/blob/gh-pages/…

@Vikrant Siwach 很好的建议。当你在 polyfill.js 中管理所有它们时，Polyfill 很快而且有点轻松