关于passive event listener的一次踩坑-CSDN博客

你真的会用addEventListener吗？

没错，的确很标题党，但是我最近发现我的一个朋友（谁说是我的！）真的不太会用addEventListener。

起因

我最近参与了一个开源项目，vue-carousel，Vue生态圈里的一个轮播组件，由加拿大的一个电商公司SSENSE开源的。然后刚好有人提了一个issue

Unable to preventDefault inside passive event listener due to target being treated as passive

也许有人在开发移动端应用的时候遇到过这个问题，我来为大家复现一下这个场景：

当我们给document添加了touch事件的监听器的时候，如果同时在handler内部调用了event.preventDefault()，这时候浏览器（Chrome 56+）就会报一个warning：Unable to preventDefault inside passive event listener due to target being treated as passive

这句警告翻译过来就是：不能给passive(被动的)事件监听器preventDefault，因为它被认为是passive。

什么意思呢？不着急，首先，我们来看一下什么叫passive event listener。但是在这之前，我们还是得复习一下addEventListener的第三个参数。

不为所知的第三个参数

当我们使用addEventListener的时候，我们一般的写法是以下：

target.addEventListener(event, handler)
复制代码

相信还有人使用更完整的写法：

target.addEventListener(event, handler, false)
复制代码

是的，相信很多人也已经知道了，addEventListener方法是有第三个参数的，我们时常传入一个false来作为这第三个参数。但是我们不传其实也一样，因为这第三个参数默认就是false，是不是觉得自己不明所以地写了很多冤枉代码还自以为很严谨？

哈哈，所以我们得来看看，这第三个参数到底是做什么的。

常规操作下，这第三个参数是一个布尔值，叫useCapture，也就是指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。

我们知道，DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。如果useCapture设置为false，当前eventTarget就不会在捕获阶段接收该事件。浏览器默认我们不会在捕获阶段触发绑定事件的handler。

但是我相信还是有很多人没有认真看过addEventListener的文档，第三个参数其实并不一定是一个布尔值。他也可以是一个对象，一组配置。

{
	capture: Boolean, // 表示`listener`会在该类型的事件捕获阶段传播到该`EventTarget`时触发
	once: Boolean, // 表示`listener`在添加之后最多只调用一次。如果是`true`，`listener`会在其被调用之后自动移除
	passive: Boolean, // 表示`listener`永远不会调用`preventDefault()`。如果`listener`仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告
}
复制代码

除以上之外，还有一个mozSystemGroup，我们暂时不讨论。

所以其实我们还可以在useCapture的基础上另外配置两个配置项。

once表示listener在添加之后最多只调用一次。如果是true，listener会在其被调用之后自动移除，这跟我们在jQuery时代的once方法比较像。

passive表示listener永远不会调用preventDefault()。如果listener仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。具体的我们接着讨论。

passive event listener

在具体讨论passive event listener之前，我们先普及一个知识点。大家可以自己去看看英文文档，不过需要科学上网。

简而言之就是当我们在滚动页面的时候（通常是我们监听touch事件的时候），页面其实会有一个短暂的停顿（大概200ms），浏览器不知道我们是否要preventDefault，所以它需要一个延迟来检测。这就导致了我们的滑动显得比较卡顿。

从Chrome 51开始，passive event listener被引进了Chrome，我们可以通过对addEventListener的第三个参数设置{ passive: true }来避免浏览器检测这个我们是否有在touch事件的handler里调用preventDefault。在这个时候，如果我们依然调用了preventDefault，就会在控制台打印一个警告。告诉我们这个preventDefault会被忽略。

当我们给addEventListener的第三个参数设置了{ passive: true }，这个事件监听器就被称为passive event listener。

从Chrome 56开始，如果我们给document绑定touchmove或者touchstart事件的监听器，这个passive是会被默认设置为true以提高性能，具体chromestatue 文档。但是我们大多数人并不知道这点，并且依旧调用了preventDefault。这并不会导致什么页面崩溃级的错误，但是这可能导致我们忽略了一个页面性能优化的点，特别是在移动端这种更加重视性能优化的场景下。

兼容性

第三个参数是在近段时间才被调整为一组配置项，如果我们需要兼容旧版浏览器，我们需要写一些检测代码。

var passiveSupported = false;

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

  window.addEventListener("test", null, options);
} catch(err) {}
复制代码

这段代码为passive属性创建了一个带有getter函数的options对象；getter设定了一个标识，passiveSupported，被调用后就会把其设为true。那意味着如果浏览器检查options对象上的passive值时，passiveSupported将会被设置为true；否则它将保持false。然后我们调用addEventListener()去设置一个指定这些选项的空事件处理器，这样如果浏览器将第三个参数认定为对象的话，这些选项值就会被检查。

你可以利用这个方法检查options之中任一个值。只需使用与上面类似的代码，为选项设定一个getter。然后，当你想实际创建一个是否支持options的事件侦听器时，你可以这样做：

someElement.addEventListener("mouseup", handleMouseUp, passiveSupported ? { passive: true } : false);
复制代码

我们在someElement这里添加了一个mouseup。对于第三个参数，如果passiveSupported是true，我们传递了一个passive值为true的options对象；如果相反的话，我们知道要传递一个布尔值，于是就传递false作为useCapture的参数。

PS: 在vue-carousel的那个bug的最开始的PR里，我将addEventListener的passive设置为了false，但是这其实不是最优解，最优解应该是去掉监听器里的preventDefault，我已经提了另一个PR来解决这个问题。

参考：