addeventlistener_聊聊addEventListener（唬人的

背景（讲问题之前是不是要讲讲背景）：最近在开发移动端适配的相关东西，要做一个导航下拉框，类似于这样

但是我们的诉求是点击页面其他部分的时候页面下拉框收起，以pc的经验，我们自然是在document上绑定一个click事件，收起下拉框（或者判断target对象，这个实现方式比较多，不赘述），但是问题来了，有用户报错说ios系统下点击页面其他部分没有收起，经过查证后，发现在ios系统中对body和document绑定click事件是有问题的，所以干脆改成touch事件，当我使用touchstart事件的时候发现浏览器弹出这样的警告

哦嚯，正文来了。

上面警告的意思是不可以阻止默认行为在passive事件中，passive事件是什么意思呢？举个例子就是当我们页面滚动的时候其实页面会有一个短暂的停顿，因为浏览器需要延迟来检测我们是否会preventDefault，但是80% 的页面都不会调用 preventDefault 函数来阻止事件的默认行为。在滑动流畅度上，有 10% 的页面增加至少 100ms 的延迟，1% 的页面甚至增加 500ms 以上的延迟。所以就有了passive的定义，当你将事件设置为passive的时候，浏览器就不会再等待你是否要调用preventDefault，而是会立即执行副作用，也就是默认事件，看到这里应该就可以联想到在vue中我们会有

<

这样的用法，官方解释是 滚动事件的默认行为 (即滚动行为) 将会立即触发 ， 而不会等待 `onScroll` 完成 ，这其中包含 `event.preventDefault() ，vue还温馨提示了

没错，报错就是上面那个报错。（虽然我没读过vue源码...

那么.. 这跟addEventListener有啥关系呢？

其实没太大关系...在最新的 DOM 规范中，事件绑定函数的第三个参数变成了对象：

target.addEventListener(type, listener[, options]);

分别是：

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

这里的once，跟vue里面的应该也是如出一辙。

关于兼容性，参考了网上的一个polyfill如下：

// Test via a getter in the options object to see 
// if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("test", null, opts);
} catch (e) {}

// Use our detect's results. 
// passive applied if supported, capture will be false either way.
elem.addEventListener(
  'touchstart',
  fn,
  supportsPassive ? { passive: true } : false
); 

so，再看看标题，是不是挺唬人的~