判断 addEventListener 是否支持 passive 属性

Last Updated: December 3, 2018 · 2 min read

写法

先看一下 MDN 现在 addEventListener 的写法,传参变成了这样:

javascript

以前第三个参数是一个 Boolean 值,它决定是否为捕获模式,现在可以传入一个对象了

  • capture: 同以前一样,表示 listener 是在捕获阶段执行还是冒泡阶段执行
  • passive: 表示 listener 永远不会调用 preventDefault()。
  • once: 表示 listener 只会调用一次。

用处

看上去懵懵的,其实,总结一下就是 passive 主要是为了优化滑动性能而生,当 passive 设置为 true 时,会告诉浏览器你的 listener 中不会调用 preventDefault() 这个方法,从而浏览器会做一系列优化来提升滑动体验,从而使滑动更顺畅

使用场景

当你的 listener 中不会调用 preventDefault() 方法时,都尽量使用它,如果你设置了 passivetrue 并且你代码中还调用了 preventDefault() 方法,那么浏览器会抛出一个错误

兼容性

这个属性出来的比较晚,兼容性不太好,怎么检测浏览器是否支持该属性呢?这里有个方法

javascript

当浏览器支持该属性时 passiveSupported 会被赋值为 true,这段代码简直是酷到没朋友 👽


©2022xiaojun1994
 0   0