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而阻塞页面渲染。

 

posted @ 2021-04-26 00:15  猎奇游渔  阅读(364)  评论(0编辑  收藏  举报