第三個(gè)參數(shù)可以設(shè)置啥？

從官方文檔看，addEventListener 方法使用如下：

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

還有一個(gè)兼容性不好的使用方法就不提了，也不太常用。

主要關(guān)注下第三個(gè)參數(shù)，可以設(shè)置為bool類型（useCapture）或者object類型(options)。

• options包括三個(gè)布爾值選項(xiàng)：

  • capture: 默認(rèn)值為false（即 使用事件冒泡）. 是否使用事件捕獲；
  • once: 默認(rèn)值為false. 是否只調(diào)用一次，if true，會(huì)在調(diào)用后自動(dòng)銷毀listener
  • passive: if true, 意味著listener永遠(yuǎn)不遠(yuǎn)調(diào)用preventDefault方法，如果又確實(shí)調(diào)用了的話，瀏覽器只會(huì)console一個(gè)warning，而不會(huì)真的去執(zhí)行preventDefault方法。根據(jù)規(guī)范，默認(rèn)值為false. 但是chrome, Firefox等瀏覽器為了保證滾動(dòng)時(shí)的性能，在document-level nodes(Window, Document, Document.body)上針對(duì)touchstart和touchmove事件將passive默認(rèn)值改為了true， 保證了在頁面滾動(dòng)時(shí)不會(huì)因?yàn)樽远x事件中調(diào)用了preventDefault而阻塞頁面渲染。

• useCapture: 默認(rèn)值為false（即 使用事件冒泡）。

如何與removeEventListener 方法合作？

removeEventListener的參數(shù)與addEventListener類似：

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

在移除之前添加的監(jiān)聽事件時(shí)，很顯然需要傳入同樣的type和listener，那第三個(gè)參數(shù)options和useCapture呢?

只會(huì)檢查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成對(duì)兒出現(xiàn)？

當(dāng)DOM元素與事件擁有不同的生命周期時(shí)，倘若不remove掉eventListener就有可能導(dǎo)致內(nèi)存泄漏（保留或增加了不必要的內(nèi)存占用）。比如在單頁應(yīng)用中，切換了頁面后，原組件已經(jīng)卸載，但其注冊(cè)在document上的事件卻保留了下來，白白占用了內(nèi)存空間。所以removeEventlister與addEventListener成對(duì)兒出現(xiàn)是best practice，可以避免可能出現(xiàn)的內(nèi)存泄漏問題。