什么是被动事件监听器?

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

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

169299 次浏览
被动事件监听器是一个新兴的网络标准,新特性 Chrome 51提供了一个重要的潜在推动滚动 的性能。Chrome发布说明。 < / p >

它使开发人员能够选择更好的滚动性能,消除了在触摸和车轮事件侦听器上滚动来阻止的需要。

问题:所有现代浏览器都有线程滚动特性,即使在运行昂贵的JavaScript时也可以平滑地滚动,但这种优化部分地失败于需要等待任何touchstarttouchmove处理程序的结果,这可能会通过在事件上调用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);

__abc0, __abc1, __abc2