什么是被动事件监听器？

Question

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

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

Answer 1

Passive event listeners are an emerging web standard, new feature shipped in Chrome 51 that provide a major potential boost to scroll performance. Chrome Release Notes.

它使开发人员能够通过消除滚动阻止触摸和滚轮事件侦听器的需要来选择加入以获得更好的滚动性能。

问题：所有现代浏览器都有线程滚动功能，允许平滑滚动到运行，即使昂贵的 JavaScript 是运行ning , 但由于需要等待任何 touchstart 和 touchmove 处理程序的结果，这种优化部分失败了，这可能会通过调用事件上的 preventDefault() 来完全阻止滚动。

解法：{passive: true}

通过将触摸或滚轮侦听器标记为被动，开发人员承诺处理程序不会调用 preventDefault 来禁用滚动。这使浏览器无需等待 JavaScript 即可立即响应滚动，从而确保为用户提供可靠流畅的滚动体验。

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

Answer 2

这个错误一直出现在 React / Preact 项目中。它似乎根本没有任何影响。通过在 devTools 日志级别中取消选择“详细”来关闭它

什么是被动事件监听器？

What are passive event listeners?

javascript

event-listener

dom-events

passive-event-listeners