18.vue修饰符 passive / addEventListener

 passive这个修饰符会执行默认方法。

 通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。

再通俗点说就是不管你写了没写阻止默认行为，浏览器都会去查询一下，看你到底阻止了没有。

查询就需要时间成本，为了让我们的滚动事件更加平滑，提前告诉浏览器别查询了。我不阻止。

我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

 这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

注：passive和prevent冲突，不能同时绑定在一个监听器上。

关于addEventListener的第三个参数（默认是冒泡，但是Chrome, Firefox等浏览器为了保证滚动时的性能，在文档节点(Window, Document, Document.body)上针对touchstart和touchmove事件将passive默认值改为了true， 保证了在页面滚动时不会因为自定义事件中调用了preventDefault而阻塞页面渲染。）

语法

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);

参数
type
　　表示监听事件类型的字符串，如点击事件为click
listener
　　表示监听事件的回调函数
useCapture
　　默认为false，表示在事件冒泡阶段调用；当该值为true时，表示在事件捕获阶段调用。
options
　　一个指定有关listener属性的可选参数对象。可选参数如下：

1. capture：布尔值，默认值为false，表示在冒泡阶段调用；当该值为true时，表示在事件捕获阶段调用。
2. once：布尔值，默认值为false，表示回调函数最多只调用一次。为true时，listener回调函数在被调用后会被移除。
3. passive：布尔值，为true时，表示listener永远不会调用preventDefault()阻止默认行为的方法。根据规范，默认值为false.，但是Chrome, Firefox等浏览器为了保证滚动时的性能，在文档节点(Window, Document, Document.body)上针对touchstart和touchmove事件将passive默认值改为了true， 保证了在页面滚动时不会因为自定义事件中调用了preventDefault而阻塞页面渲染。