`AbortSignal`を`addEventListener()`に渡しておけば、`removeEventListener()`は不要

という趣旨の投稿をXで見て、確かめてみたら本当だった。（元URLはコピーするの忘れてしまった）

という驚きをメモしておく次第。

こういうこと

const handleMouseMove = () => console.log("MOVING!");

window.addEventListener("mousemove", handleMouseMove);

// Later...

window.removeEventListener("mousemove", handleMouseMove);

って書くことはよくあるはず。

ハンドラを切り出しておかないといけないし、イベント名も列挙しないといけなくて、地味に面倒なやつ。

これがなんと、こう書ける。

const ac = new AbortController();

window.addEventListener("mousemove", () => console.log("MOVING!"), { signal: ac.signal });

// Later...

ac.abort();

abort()するだけでいい！

useEffect()みたいなシーンでも活躍間違いなし。

仕様書

If an AbortSignal is passed for options’s signal, then the event listener will be removed when signal is aborted. https://dom.spec.whatwg.org/#interface-eventtarget

fetch()を中断する以外にも便利な用途があったのだなあ。