このページでは、window.addEventListener と window.removeEventListener の使い方や仕組みについて詳しく解説します。例を多数挙げて、実際の使用方法を分かりやすく説明します。

window.addEventListenerとは

window.addEventListener は、特定のイベントが発生したときに実行される関数（イベントリスナー）を登録するためのメソッドです。このメソッドを使用すると、ページの特定のタイミングやユーザーの操作に応じて処理を追加できます。

例えば、ユーザーがページをスクロールしたときやクリックしたときに何か処理を行いたい場合に役立ちます。

window.removeEventListenerとは

window.removeEventListener は、addEventListener で登録したイベントリスナーを解除するためのメソッドです。これにより、イベントが発生しても不要な処理が実行されなくなります。特に、メモリリークや不要なリソース消費を防ぐために重要です。

基本的な使い方

window.addEventListenerの基本構文

window.addEventListener(event, listener[, options]);

• event: イベントの種類（例: “click”, “scroll”, “keydown” など）。
• listener: イベントが発生したときに実行される関数。
• options: オプション（省略可能）。例えば、capture, once, passive など。

window.removeEventListenerの基本構文

window.removeEventListener(type, listener[, options]);

• type: イベントの種類。
• listener: 解除したいイベントリスナー関数。
• options: オプション（省略可能）。addEventListener のオプションと一致する必要があります。

応用的な使い方

オプションの使用例

例えば、once: true を指定すると、イベントが1回だけ実行されます。

window.addEventListener("click", () => {
    console.log("1回だけ実行されます");
}, { once: true });

イベントのキャプチャリングとバブリング

デフォルトではイベントは「バブリング段階」でリスナーが実行されますが、capture: true を指定すると「キャプチャリング段階」で実行されます。

window.addEventListener("click", (event) => {
    console.log("キャプチャリング段階で実行されました");
}, { capture: true });

実践例

スクロールイベントの登録

window.addEventListener("scroll", () => {
    console.log("スクロール中です");
});

リサイズイベントの登録と解除

function onResize() {
    console.log("ウィンドウサイズが変更されました");
}
window.addEventListener("resize", onResize);

// 後で解除
window.removeEventListener("resize", onResize);

キーボード入力の監視

function logKey(event) {
    console.log(`キーが押されました: ${event.key}`);
}
window.addEventListener("keydown", logKey);

// キーボードイベントリスナーを解除
window.removeEventListener("keydown", logKey);

よくある間違い

関数参照の違い

匿名関数を使うと、removeEventListener で解除できなくなるため、注意が必要です。

// 解除できない例
window.addEventListener("click", () => {
    console.log("クリックされました");
});
window.removeEventListener("click", () => {
    console.log("クリックされました");
}); // このリスナーは解除されません

// 正しい例
function handleClick() {
    console.log("クリックされました");
}
window.addEventListener("click", handleClick);
window.removeEventListener("click", handleClick);

オプションの不一致

addEventListener で指定したオプションが removeEventListener でも一致していないと、リスナーが解除されません。

よくある質問

Q: イベントリスナーはどのくらいの頻度で登録するべきですか？

A: 必要最低限のタイミングで登録し、不要になったら速やかに解除することをおすすめします。これにより、パフォーマンスやメモリ効率を向上させることができます。

Q: 同じイベントに複数のリスナーを登録できますか？

A: はい、可能です。同じイベントに複数のリスナーを登録すると、登録した順に実行されます。