什么是被动事件监听器？

Question

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

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

Answer 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