はじめに

JavaScriptでは、DOM要素に対してユーザー操作やブラウザの動作に反応するイベントを設定することができます。 この際によく使われるメソッドがaddEventListenerです。 このページでは、addEventListenerを用いたイベントハンドラの指定方法を解説します。

• 基本構文
• 具体的な使用例
• オプションの活用
• 複数のイベントハンドラの登録
• イベントハンドラの削除

基本構文

addEventListenerの基本的な構文は以下の通りです：

        element.addEventListener(event, handler, options);
    

• element: イベントを登録するDOM要素。
• event: イベントの種類（例：'click', 'keydown'）。
• handler: イベントが発生した際に実行される関数。
• options（省略可能）: イベントの設定を制御するオプション。

具体的な使用例

以下は、addEventListenerの代表的な使用例です。

クリックイベントを設定する

        const button = document.querySelector('button');
        button.addEventListener('click', () => {
            alert('ボタンがクリックされました！');
        });
    

フォームの送信イベントをキャンセルする

        const form = document.querySelector('form');
        form.addEventListener('submit', (event) => {
            event.preventDefault();
            alert('フォームの送信がキャンセルされました。');
        });
    

キーボードイベントを検出する

        document.addEventListener('keydown', (event) => {
            console.log(`キーが押されました: ${event.key}`);
        });
    

オプションの活用

addEventListenerの第3引数にはオプションを指定できます。以下はよく使われるオプションです。

• capture: イベントのキャプチャリングフェーズで実行するか（デフォルトはfalse）。
• once: イベントを1回だけ実行した後、自動的に解除する（デフォルトはfalse）。
• passive: イベントリスナーでpreventDefault()を無効にする（デフォルトはfalse）。

オプションの使用例

        const button = document.querySelector('button');
        button.addEventListener('click', () => {
            console.log('一度だけ実行されるイベント');
        }, { once: true });
    

複数のイベントハンドラの登録

addEventListenerを使うと、同じ要素に対して複数のイベントハンドラを登録できます。

        const button = document.querySelector('button');
        button.addEventListener('click', () => {
            console.log('ハンドラ1');
        });
        button.addEventListener('click', () => {
            console.log('ハンドラ2');
        });
    

この例では、ボタンをクリックすると「ハンドラ1」と「ハンドラ2」が順に実行されます。

イベントハンドラの削除

登録したイベントハンドラを削除するには、removeEventListenerを使用します。 注意点として、削除するためには同じ関数を参照する必要があります。

        function handleClick() {
            console.log('クリックされました');
        }
        const button = document.querySelector('button');
        button.addEventListener('click', handleClick);

        // イベントハンドラを削除
        button.removeEventListener('click', handleClick);
    

無名関数（() => { ... }）を使うと、削除できなくなる点に注意が必要です。

まとめ

addEventListenerを使うことで、柔軟にイベントを管理し、インタラクティブなWebページを作成できます。 イベントの種類やオプションを活用して、効率的なコーディングを心がけましょう。

ページの先頭に戻る