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，可以避免可能出现的内存泄漏问题。

最后编辑于：2019.01.03 16:14:09