判断 addEventListener 是否支持 passive 属性

写法

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

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() 方法，那么浏览器会抛出一个错误

兼容性

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

var passiveSupported = false

try {
  var options = Object.defineProperty({}, 'passive', {
    get: function() {
      passiveSupported = true
    }
  })

  window.addEventListener('test', null, options)
} catch (err) {}

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