all

什么是被动事件监听器?

发布于 2022-05-26 23:03:26

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

Passive Event Listeners在我们的项目中需要什么以及需要什么?

关注者
0
被浏览
17
1 个回答
  • 面试哥
    面试哥 2022-05-26
    为面试而生,有面试问题,就找面试哥。

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

    它使开发人员能够通过消除滚动阻塞触摸和滚轮事件侦听器的需要来选择更好的滚动性能。

    问题: 所有现代浏览器都具有线程滚动功能,即使在运行昂贵的 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);
    

    DOM 规范 ,
    演示视频
    ,解释文档



推荐阅读
知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看