什么是被动事件侦听器？

Question

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

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

Answer 1

被动事件侦听器是一项新兴的 Web 标准，是 Chrome 51 中附带的新功能，可为滚动性能提供重大的潜在提升。 Chrome 发行说明。

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

问题：所有现代浏览器都有一个线程滚动特性，即使在运行昂贵的 JavaScript 时也允许滚动平滑运行，但是这种优化部分被需要等待任何touchstart和touchmove处理程序的结果而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 规范、演示视频、 说明文档