EventListener のオプションメモ

capture

capture オプションは、イベントの伝播をキャプチャリングフェーズで処理するかどうかを指定する。デフォルトは false である。Event Listener Options 対応以前の、 useCapture フラグ相当である。

<button id="button">foo</button>

const elm = document.querySelector('#button');

document.addEventListener('click', () => {
    console.log('document');
}, { capture: false });

elm.addEventListener('click', () => {
    console.log('button');
}, { capture: false });

button
document

document
button

once

once オプションは、event listener を一度だけ実行し削除するかどうかを指定する。デフォルトは false である。

通常 event listner 及びそのスコープ変数は登録されている限り参照を保持するため、GC の対象にならず、メモリリークの原因になることがある。明示的に removeEventListener を呼び出すことで解決できるが、once オプションはより簡単に GC のケアができる。

例外として useEffect で event listner を登録する処理を書く場合は、必ず useEffect のクリーンアップ関数で removeEventListener を呼び出すこと。once オプションはその event listner が実行されたときに自動的に削除されるだけなので、event listenr を持つ component を mount しただけで listner が発火しなかった場合、クリーンアップ関数が無い場合はメモリリークの原因になる。

const Component: FC = () => {
  const ref = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('click');
    };
    const button = ref.current;

    button?.addEventListener('click', handleClick, { once: true });

    return () => {
      button?.removeEventListener('click', handleClick);
    };
  }, []);

  return <button ref={ref}>click me</button>;
}

passive

ブラウザは通常ドキュメントのスクロール体験を最適化する。しかし scroll event に event listner が登録された場合、event listener 内で preventDefault() が呼ばれる場合はスクロールを止めなくてはならない。

しかしブラウザは event listener 内で preventDefault() が呼ばれるかどうかを事前に判断できないため、scroll event に event listener が登録された場合はスクロールを止めるためにスクロールを待つ。これによりスクロール体験が悪くなる。

この問題は passive オプションを true にすることで解決できる。passive オプションを true にすると、event listener 内で preventDefault() を呼ばれないことが保証されるため、ブラウザは listener の完了を待たずにスクロールできる。

どの程度ユーザー操作が改善されるかは以下記事内の動画が参考になる。

signal

signal オプションは AbortSignal を指定する。AbortSignal は AbortController を通じて生成される。AbortSignal が abort されると、event listener は削除される。

一見とても便利なオプションだが罠がある。Abort すればもちろん event listener が削除されるが、正常処理された場合を Signal だけからは判断できないため、event listener が削除されずメモリリークの原因になる可能性がある。

これらに対する対策は @jxck さんのこの記事が参考になるのでそちらを参考にしてほしい。

AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal | blog.jxck.io

最近 AbortSignal.any() が提案され、急速に実装が進んでいる。すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備され...