写法
先看一下 MDN 现在 addEventListener
的写法,传参变成了这样:
1 | target.addEventListener(type, listener, { capture: Boolean, passive: Boolean, once: Boolean }) |
以前第三个参数是一个 Boolean 值,它决定是否为捕获模式,现在可以传入一个对象了
- capture: 同以前一样,表示 listener 是在捕获阶段执行还是冒泡阶段执行
- passive: 表示 listener 永远不会调用 preventDefault()。
- once: 表示 listener 只会调用一次。
用处
看上去懵懵的,其实,总结一下就是 passive
主要是为了优化滑动性能而生,当 passive
设置为 true
时,会告诉浏览器你的 listener 中不会调用 preventDefault()
这个方法,从而浏览器会做一系列优化来提升滑动体验,从而使滑动更顺畅
什么时候使用它
当你的 listener 中不会调用 preventDefault()
方法时,都尽量使用它,如果你设置了 passive
为 true
并且你代码中还调用了 preventDefault()
方法,那么浏览器会抛出一个错误
不兼容怎么办
这个属性出来的比较晚,兼容性不太好,怎么检测浏览器是否支持该属性呢?这里有个方法
1 | var passiveSupported = false |
当浏览器支持该属性时 passiveSupported
会被赋值为 true
,这段代码简直是酷到没朋友 👽