addEventListener的第三个参数到底该怎么设置

第三个参数可以设置啥?

官方文档看,addEventListener 方法使用如下:

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

还有一个兼容性不好的使用方法就不提了,也不太常用。

主要关注下第三个参数,可以设置为bool类型(useCapture)或者object类型(options)。

  • options包括三个布尔值选项:

    • capture: 默认值为false(即 使用事件冒泡). 是否使用事件捕获;
    • once: 默认值为false. 是否只调用一次,if true,会在调用后自动销毁listener
    • passive: if true, 意味着listener永远不远调用preventDefault方法,如果又确实调用了的话,浏览器只会console一个warning,而不会真的去执行preventDefault方法。根据规范,默认值为false. 但是chrome, Firefox等浏览器为了保证滚动时的性能,在document-level nodes(Window, Document, Document.body)上针对touchstart和touchmove事件将passive默认值改为了true, 保证了在页面滚动时不会因为自定义事件中调用了preventDefault而阻塞页面渲染。
  • useCapture: 默认值为false(即 使用事件冒泡)。

如何与removeEventListener 方法合作?

removeEventListener的参数与addEventListener类似:

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

在移除之前添加的监听事件时,很显然需要传入同样的type和listener,那第三个参数options和useCapture呢?

只会检查addEventListener的useCapture或options中的capture值。

例如:

element.addEventListener("mousedown", handleMouseDown, { passive: true });
element.removeEventListener("mousedown", handleMouseDown, { passive: true });     // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: false });    // Succeeds
element.removeEventListener("mousedown", handleMouseDown, { capture: true });     // Fails
element.removeEventListener("mousedown", handleMouseDown, { passive: false });    // Succeeds
element.removeEventListener("mousedown", handleMouseDown, false);                 // Succeeds
element.removeEventListener("mousedown", handleMouseDown, true);                  // Fails

是否一定要与removeEventlister成对儿出现?

当DOM元素与事件拥有不同的生命周期时,倘若不remove掉eventListener就有可能导致内存泄漏(保留或增加了不必要的内存占用)。比如在单页应用中,切换了页面后,原组件已经卸载,但其注册在document上的事件却保留了下来,白白占用了内存空间。所以removeEventlister与addEventListener成对儿出现是best practice,可以避免可能出现的内存泄漏问题。