addEventListener的第三个参数详解

时间:2024-01-27 08:49:45
示例代码
   element.addEventListener("mousedown", func, { passive: true });
   element.addEventListener("mousedown", func, { passive: true }); 
   element.addEventListener("mousedown", func, { capture: false }); 
   element.addEventListener("mousedown", func, { capture: true }); 
   element.addEventListener("mousedown", func, { passive: false }); 
   element.addEventListener("mousedown", func, false); 
   element.addEventListener("mousedown", func, true); 
参数详细解释
  在addEventListener事件委托中第三个参数,可以设置为bool类型(useCapture)或者object类型(options)。
  • 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而阻塞页面渲染。
  • bool类型(useCapture): 默认值为false(即 使用事件冒泡),与capture用法相同。

那么怎样与removeEventListener 方法合作呢?

  只会检查addEventListener的  bool类型(useCapture)或者  object类型(options)值。