addEventListener() 的参数 passive 的用法

祈福qifu

已于 2023-06-07 09:55:52 修改

阅读量270

点赞数

文章标签： javascript 前端 html

于 2023-06-07 09:54:30 首次发布

本文链接：https://blog.csdn.net/m0_37566921/article/details/131081356

版权

文章讨论了移动端页面中touchstart事件监听器可能导致的页面卡顿问题，因为浏览器需等待监听器执行以判断是否阻止默认行为。passive监听器的引入解决了这一问题，它保证不会阻止默认事件，允许浏览器并行处理滚动，从而提高性能。大部分滚动事件监听器并不阻止默认行为，passive标志能有效优化这部分情况。

摘要由CSDN通过智能技术生成

很多移动端的页面都会监听 touchstart 等 touch 事件，像这样：

document.addEventListener("touchstart", function(e){
    ... // 浏览器不知道这里会不会有 e.preventDefault()
})

由于 touchstart 事件对象的 cancelable 属性为 true，也就是说它的默认行为可以被监听器通过 event.preventDefault() 方法阻止，那它的默认行为是什么呢，通常来说就是滚动当前页面（还可能是缩放页面），如果它的默认行为被阻止了，页面就必须静止不动。但浏览器无法预先知道一个监听器会不会调用 preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。即便监听器是个空函数，也会产生一定的卡顿，毕竟空函数的执行也会耗时。

有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示它不会对事件的默认行为说 no，浏览器知道了一个监听器是 passive 的，它就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。

所以passive:true的意思就是告诉浏览器，不会阻止默认事件，你放心的滚动吧，不用等待了。

参考资料：

cEventTarget.addEventListener() - Web API 接口参考 | MDN

addEventListener() 的参数之passive 的用法_passive: true_阳阳C的博客-CSDN博客