【JavaScript】关于addEventListener的第三个参数详解

68 阅读1分钟

addEventListener(),接收3个参数

第一个参数event(监听的事件)

第二个参数是函数fn(需要执行的事)

第三个参数可以是布尔值也可以是对象

本篇文章着重分析他的第三个参数

在addEventListener事件委托中第三个参数,可以设置为bool类型(useCapture)或者object类型(options)。

  1. object类型(options)包括三个布尔值选项:
  • capture: 默认值为 false---即使用事件冒泡,true---使用事件捕获;
  • once: 默认值为false---并非只调用一次,true---会在调用后自动销毁listener(即只调用一次)
  • passive:不同浏览器默认值不同。true---listener永远不远调用preventDefault方法。根据规范,默认值为false。 但是chrome, Firefox等浏览器为了保证滚动时的性能,在Window,、Document、 Document.body上针对 touchstart 和 touchmove 事件将passive默认值改为了true, 保证了在页面滚动时不会因为自定义事件中调用了preventDefault而阻塞页面渲染。
  1. bool类型(useCapture): 默认值为false(即使用事件冒泡),与capture用法相同。

示例代码

parent.value.addEventListener('scroll', scrollHandle, true);
parent.value.addEventListener('scroll', scrollHandle, { passive: true });