当前位置: 首页 > 知识库问答 >
问题:

什么是被动事件侦听器?

慕凌
2023-03-14

在致力于提高渐进式web应用程序的性能时,我遇到了一个新功能被动事件侦听器,我发现很难理解这个概念。

什么是被动事件侦听器,在我们的项目中需要它吗?

共有1个答案

锺英彦
2023-03-14

被动事件侦听器是一种新兴的网络标准,Chrome51中提供的新功能为滚动性能提供了巨大的潜在提升。Chrome发行说明。

它使开发人员无需滚动来阻止触控式和滚轮式事件监听器,从而可以选择加入以获得更好的滚动性能。

问题:所有现代浏览器都有一个线程滚动功能,即使在运行昂贵的JavaScript时,滚动也能平稳运行,但这种优化在一定程度上因为需要等待任何touchstarttouchmove处理程序的结果而失败,通过调用事件上的preventDefault(),可以完全阻止滚动。

解:{被动:真}

通过将触摸或滚轮监听器标记为被动的,开发人员promise处理程序不会调用预防默认来禁用滚动。这使浏览器能够立即响应滚动,而无需等待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,演示视频,解释文档

 类似资料:
  • 问题内容: 在努力提高渐进式Web应用程序的性能时,我遇到了一项新功能,但我很难理解这一概念。 在我们的项目中有什么以及有什么需要? 问题答案: 被动事件侦听器是一种新兴的网络标准,是Chrome51附带的一项新功能,可极大提高滚动性能。 通过消除滚动以阻止触摸和滚轮事件监听器的需求,它使开发人员可以选择更好的滚动性能。 问题: 所有现代浏览器都具有线程化滚动功能,即使在运行昂贵的JavaScri

  • 我正在编写一个手势/动作库,它还管理事件侦听器和触发。我已经实现了我的库,通过一个API支持手势对象设置被动侦听器,该API如下:。My lib支持多种手势,设置多个听众,包括被动和非被动。lib将确保最多只有一个真正的侦听器连接到DOM。因此,我们最多可以有2个touchstart监听器,其中一个是被动监听器,另一个不是。 我的问题和问题是,我无法检测接收到的事件是否附加了选项。我认为我可以在本

  • 单击选择元素显示此警告: [违规]将非被动事件侦听器添加到滚动阻止“鼠标滚轮”事件。将事件处理程序标记为“被动”以使页面更加响应。 问题是,这也扩大了谷歌浏览器中HTML页面的高度。在Chrome版本59.0中测试。3071.86(官方版本)(64位)在firefox中不会出现这种情况。 简单代码:https://jsfiddle.net/gurigraphics/2399mnyb 如果自定义滚动

  • 本文向大家介绍什么是事件监听?相关面试题,主要包含被问及什么是事件监听?时的应答技巧和注意事项,需要的朋友参考一下 参考回答: addEventListener()方法,用于向指定元素添加事件句柄,它可以更简单的控制事件,语法为 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型(如 "click" 或 "mouse

  • 问题:我正在尝试为我的应用程序创建一个组件,其他组件将使用该组件渲染表。它可能有三个可能的单元格值: 文本 HTML 组成部分 我能够呈现上面所有的值,但是我在绑定侦听器时遇到了困难。我试图实现的是这样的:传递一个要绑定到组件的方法和事件,表应该将其绑定到相应的单元格。例如: 表JSON 表组件 上面只是我正在尝试的一个片段,表循环通过传递的对象并相应地呈现。 我已经试过了 因此,解决方案1 因此

  • 本文向大家介绍在事件侦听上调用event.preventDefault()的最佳方式是什么?相关面试题,主要包含被问及在事件侦听上调用event.preventDefault()的最佳方式是什么?时的应答技巧和注意事项,需要的朋友参考一下 在事件侦听上调用event.preventDefault()的最佳方式是什么?