JavaScriptのイベント処理を極める！addEventListenerの使い方と応用テクニック

ウェブサイトをもっとインタラクティブにしたいなら、JavaScriptのイベント処理は避けて通れない。この記事では、イベント処理の基礎から実践的な応用テクニックまでをわかりやすく解説していく。

イベントとは？
addEventListenerの基本
1. 例：クリックイベントを追加する
よく使うイベントの種類
イベントリスナーの応用テクニック

イベントとは？

ウェブページでは、ボタンのクリックやキーボードの入力、マウスの移動など、ユーザーが行うさまざまな動作が「イベント」として扱われる。これらのイベントに応じて適切な処理を実行するのが、JavaScriptの「イベントリスナー」だ。

たとえば、「ボタンをクリックしたらメッセージを表示する」といった動作を実装するのに役立つ。

addEventListenerの基本

JavaScriptでイベントを扱う際に最もよく使われるのがaddEventListenerメソッド。基本の構文は以下のとおり。

要素.addEventListener(イベントの種類, 関数);

例：クリックイベントを追加する

以下のコードは、ボタンをクリックしたときに「クリックされました！」と表示する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>イベントリスナーの基本</title>
</head>
<body>
    <button id="myButton">クリックしてね</button>
    <p id="message"></p>

    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            document.getElementById("message").textContent = "クリックされました！";
        });
    </script>
</body>
</html>

これで、ボタンをクリックするとメッセージが表示される。

よく使うイベントの種類

JavaScriptにはさまざまなイベントがあり、用途によって使い分ける。

イベント名	説明
click	クリックされたとき
mouseover	マウスが要素に乗ったとき
mouseout	マウスが要素から外れたとき
keydown	キーが押されたとき
keyup	キーが離されたとき
submit	フォームが送信されたとき
change	フォームの値が変更されたとき

イベントリスナーの応用テクニック

1. 複数のイベントを設定する

1つの要素に対して、複数のイベントを追加することも可能。

const button = document.getElementById("myButton");

button.addEventListener("mouseover", function() {
    button.style.backgroundColor = "lightblue";
});

button.addEventListener("mouseout", function() {
    button.style.backgroundColor = "";
});

このコードでは、ボタンにマウスが乗ると色が変わり、離れると元に戻る。

2. イベントの削除

removeEventListenerを使えば、登録したイベントを解除できる。

function handleClick() {
    alert("クリックされました！");
}

button.addEventListener("click", handleClick);

// しばらくしてイベントを削除
setTimeout(() => {
    button.removeEventListener("click", handleClick);
}, 5000);

このコードでは、5秒後にボタンのクリックイベントが削除される。

3. イベントの伝播を制御する

イベントは親要素や子要素にも影響を及ぼす。これを「イベントの伝播」という。

stopPropagationを使う

以下のコードでは、リストのアイテムをクリックしても親要素のイベントが発生しないようにする。

document.getElementById("list").addEventListener("click", function() {
    alert("リストがクリックされました");
});

document.querySelectorAll(".item").forEach(item => {
    item.addEventListener("click", function(event) {
        alert("アイテムがクリックされました");
        event.stopPropagation();
    });
});

これにより、アイテムをクリックしても親のリストにはイベントが伝播しない。