【JavaScript】HTMLの操作～イベントの待機（イベントリスナー）～

JavaScriptでは、ユーザーの操作やシステムの動作に応じて処理を実行するために、イベントリスナーを使用します。イベントリスナーは、特定のイベントが発生したときに指定した関数を実行する仕組みです。この記事では、イベントリスナーの基本的な使い方や便利なテクニックについて解説します。

addEventListener()メソッド

`addEventListener()`メソッドは、指定したイベントが発生したときに実行される関数（イベントリスナー）を要素に追加するために使用します。これにより、ユーザーの操作やブラウザの動作に対して動的に応答することが可能です。

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

button.addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

イベントリスナーを設定する

イベントリスナーは、ユーザーの操作やブラウザのイベントに応じて特定の処理を実行するために設定します。例えば、クリック、マウスオーバー、キーボード入力などに対してイベントリスナーを設定することができます。

let inputField = document.getElementById("myInput");

inputField.addEventListener("keyup", function() {
    console.log("キーが押されました");
});

イベントリスナーのコールバック関数に渡されるEventオブジェクトを利用する

イベントリスナーのコールバック関数には、自動的にEventオブジェクトが渡されます。このオブジェクトを利用することで、発生したイベントに関する詳細情報を取得したり、制御したりすることができます。

let link = document.getElementById("myLink");

link.addEventListener("click", function(event) {
    event.preventDefault(); // デフォルトのリンク動作をキャンセル
    console.log("リンクがクリックされましたが、ページ遷移はしません");
});

イベントが発生した要素に処理する

イベントリスナーは、イベントが発生した要素をthisキーワードで参照することができます。これを使うことで、特定の要素に対して動的に処理を行うことができます。

let items = document.querySelectorAll(".item");

items.forEach(function(item) {
    item.addEventListener("click", function() {
        this.style.backgroundColor = "yellow"; // クリックされた要素の背景色を変更
    });
});

特定の要素のデフォルト動作をキャンセルする

多くのHTML要素には、デフォルトの動作があります。例えば、リンクをクリックすると別のページに移動する、フォームが送信される、などです。event.preventDefault()を使用すると、これらのデフォルト動作をキャンセルし、独自の動作を実行することができます。

let form = document.getElementById("myForm");

form.addEventListener("submit", function(event) {
    event.preventDefault(); // フォーム送信をキャンセル
    console.log("フォームが送信されませんでした");
});

イベントリスナーを削除する

必要に応じて、以前に設定したイベントリスナーを削除することができます。これにはremoveEventListener()メソッドを使用します。このメソッドには、addEventListener()で使用したのと同じ関数を渡す必要があります。

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

function showAlert() {
    alert("ボタンがクリックされました！");
}

button.addEventListener("click", showAlert);

// 後でイベントリスナーを削除
button.removeEventListener("click", showAlert);

一度イベントが発生したら待機を止める

特定のイベントを一度だけ処理したい場合には、イベントリスナー内でremoveEventListener()を使って自分自身を削除することができます。または、onceオプションを使って、イベントリスナーを一度だけ実行させることも可能です。

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

function showAlert() {
    alert("このメッセージは一度だけ表示されます");
    button.removeEventListener("click", showAlert);
}

button.addEventListener("click", showAlert);

// または、オプションで一度だけ実行するよう設定
button.addEventListener("click", function() {
    alert("このメッセージは一度だけ表示されます");
}, { once: true });

まとめ

JavaScriptのイベントリスナーは、ユーザーの操作やブラウザのイベントに応じて動的な処理を実行するために不可欠な機能です。addEventListener()メソッドを使ってイベントリスナーを設定し、必要に応じてremoveEventListener()で削除することで、効率的にイベントを制御できます。また、Eventオブジェクトやデフォルト動作のキャンセル、イベントの一度だけの処理など、便利な機能を活用することで、より高度なインタラクションを実現できます。