什么是被动事件监听器？ [英] What are passive event listeners?

问题描述

在解决提升渐进式网络应用程序性能的问题时，我遇到了一个新特性被动事件监听器，我发现很难理解这个概念。

什么是被动事件监听器以及在我们的项目中需要什么？
<被动事件监听器是一种新兴的网络标准，在Chrome 51中新增了一项新功能
，它提供了一个主要的潜在提升
表现。 Chrome版本说明。

它使开发人员能够选择加入，从而无需滚动即可阻止触摸和滚轮事件侦听器，从而更好地滚动性能。

$ b

问题：所有现代浏览器都具有线程滚动功能，即使在运行昂贵的JavaScript时也能够平滑地运行滚动功能，但这种优化部分被需求以等待任何 touchstart 和 touchmove 处理程序的结果，这可能会完全通过调用 preventDefault（）关于事件。

解决方案： - {passive：true}
$ b

车轮监听器是被动的，开发人员承诺，处理程序不会调用 preventDefault 来禁用滚动功能。 这可以让浏览器立即响应滚动而无需等待JavaScript，从而确保为用户提供可靠的滚动体验。。

  addEventListener（document，touchstart，function（e）{
 console.log（e.defaultPrevented）; //将为false 
 e。 preventDefault（）; //什么都不做，因为监听器是被动的
 console.log（e.defaultPrevented）; //仍然是false 
}，Modernizr.passiveeventlisteners？{passive：true}：false）; 
  

DOM Spec ，演示视频， 说明文档

While working around to boost performance for progressive web apps, I came across a new feature Passive Event Listeners and I find it hard to understand the concept.

What are Passive Event Listeners and what is the need to have it in our projects?

解决方案

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.

It enable developers to opt-in to better scroll performance by eliminating the need for scrolling to block on touch and wheel event listeners.

Problem: All modern browsers have a threaded scrolling feature to permit scrolling to run smoothly even when expensive JavaScript is running, but this optimization is partially defeated by the need to wait for the results of any touchstart and touchmove handlers, which may prevent the scroll entirely by calling preventDefault() on the event.

Solution:- {passive: true}

By marking a touch or wheel listener as passive, the developer is promising the handler won't call preventDefault to disable scrolling. This frees the browser up to respond to scrolling immediately without waiting for JavaScript, thus ensuring a reliably smooth scrolling experience for the user.

addEventListener(document, "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

这篇关于什么是被动事件监听器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！