什么是被动事件监听器?


Answers:


212

被动事件监听器是一种新兴的网络标准,是Chrome 51附带的一项新功能,可以极大地提高滚动性能。Chrome发行说明。

通过消除滚动以阻止触摸和滚轮事件监听器的需要,开发人员可以选择加入以提高滚动性能。

问题:所有现代浏览器都具有线程化滚动功能,即使在运行昂贵的JavaScript时,滚动操作也可以平稳运行,但是这种优化由于需要等待任何touchstarttouchmove处理程序的结果而被部分挫败,这可能会通过调用来完全阻止滚动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演示视频解释文档


1
所以我们应该总是添加这行代码(至少在大多数情况下),对吗?
Altiano Gerung

这会使Mozilla中的js引擎崩溃。在附加此事件侦听器之前,最好先检测浏览器
yardpenalty.com 16/09/19

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

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

@Vikrant Siwach很好的建议。当您管理
polyfill
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.