JavaScriptのaddEventListenerの解説

JavaScriptのaddEventListenerは、HTML要素にイベントリスナーを登録するためのメソッドです。 このメソッドを使うと、ユーザーの操作（クリック、キーボード入力、スクロールなど）に対する処理を追加できます。 以下では、addEventListenerの基本的な使い方から応用例まで、詳しく解説します。

• 基本的な使い方
• サポートされているイベントの種類
• オプション引数について
• イベントリスナーの削除
• 応用例

基本的な使い方

addEventListenerは、以下の形式で使用します:

        element.addEventListener(eventType, callback, options);
    

• eventType: イベントの種類（例: “click”, “keydown”）
• callback: イベントが発生したときに実行される関数
• options: オプション（省略可能）

以下は、ボタンがクリックされたときにメッセージを表示する例です:

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

サポートされているイベントの種類

JavaScriptのaddEventListenerで使用できる主なイベントタイプには、以下のようなものがあります:

• マウスイベント: click, dblclick, mouseover, mouseout
• キーボードイベント: keydown, keyup, keypress
• フォームイベント: submit, change, input
• ウィンドウイベント: resize, scroll, load, unload

例えば、ページがスクロールされたときにイベントを処理するコードは以下の通りです:

        window.addEventListener('scroll', () => {
            console.log('スクロールされました！');
        });
    

オプション引数について

addEventListenerの第3引数として、オプションを指定できます。主なオプションは以下の通りです:

• capture: trueにすると、キャプチャフェーズでイベントを処理します。
• once: trueにすると、イベントリスナーは一度だけ実行され、その後自動的に削除されます。
• passive: trueにすると、デフォルトのイベント処理をブロックしないことを示します（例: スクロールイベント）。

例えば、以下のコードでは、リスナーが一度だけ実行されます:

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

イベントリスナーの削除

removeEventListenerを使用すると、イベントリスナーを削除できます。 この際、addEventListenerに登録したのと同じ引数を指定する必要があります。

例:

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

応用例

クリックで色を変更する

以下は、クリックした要素の背景色をランダムに変更する例です:

        const div = document.querySelector('div');
        div.addEventListener('click', () => {
            const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
            div.style.backgroundColor = randomColor;
        });
    

複数の要素に同じイベントリスナーを追加

以下は、複数のボタンをクリックするとそれぞれのテキストを表示する例です:

        const buttons = document.querySelectorAll('button');
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                console.log(button.textContent);
            });
        });
    

フォームの入力内容をリアルタイムで表示

フォームの入力内容をリアルタイムで他の要素に反映させる例です:

        const input = document.querySelector('input');
        const display = document.querySelector('p');
        input.addEventListener('input', () => {
            display.textContent = input.value;
        });