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