【PR】を含みます。

フロントエンド

【JavaScript】イベントハンドラの登録方法

JavaScript イベントハンドラの登録方法

フロントエンドの業務でよく使用するJavaScriptのイベントハンドラとイベントハンドラの登録方法についてまとめました。

イベントハンドラとは？

イベントハンドラは、ユーザーがウェブページで行うアクション（クリック、キーボード入力、マウス移動など）に対して特定のコードを実行するための仕組みです。

イベントハンドラを設定することで、インタラクティブなウェブページを作成することができます。

よく使用されるイベントハンドラ一覧

blur
フォーカスが外れたとき
click
要素がクリックされたとき
change
内容が変更されたとき
drag
要素がドラッグされたとき
focus
フォーカスが当たったとき
keydown
キーボードのキーが押されたとき
keyup
キーボードのキーが離されたとき
load
ページやリソースが読み込まれたとき
mousemove
マウスを動かしているとき
mouseout
マウスが要素から離れたとき
mouseover
マウスが要素の上に乗ったとき
resize
ウィンドウサイズが変更されたとき
submit
フォームが送信されたとき
scroll
ページや要素がスクロールされたとき
select
テキストなどが選択されたとき

基本的なイベントハンドラの登録方法

基本的なイベントハンドラの登録方法を3つ紹介します。

使用頻度は3つ目に解説しているaddEventListenerメソッドを使用することが多いです。

1. HTMLの属性を使う方法

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button onclick="alert('ボタンがクリックされました！')">クリック</button>
</body>
</html>

2. JavaScript内で設定する方法

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button id="myButton">クリック</button>
    <script>
      document.getElementById('myButton').onclick = function() {
        alert('ボタンがクリックされました！');
      };
    </script>
</body>
</html>

3. addEventListenerメソッドを使う方法

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button id="myButton">クリック</button>
    <script>
      document.getElementById('myButton').addEventListener('click', function() {
        alert('ボタンがクリックされました！');
      });
    </script>
</body>
</html>

addEventListenerメソッドを使うメリット

複数のイベントハンドラを追加できる

addEventListenerを使用すると、同じイベントに対して複数のイベントハンドラを追加することができます。

これにより、特定の要素で異なる動作を同時に実行することができます。

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button id="myButton">クリック</button>
    <script>
      document.getElementById('myButton').addEventListener('click', function() {
        alert('クリックイベント1');
      });
      document.getElementById('myButton').addEventListener('click', function() {
        alert('クリックイベント2');
      });
    </script>
</body>
</html>

インラインイベントハンドラの上書きを避けることができる

addEventListenerを使用すると、既存のインラインイベントハンドラ（HTML属性に直接書かれたイベントハンドラ）が上書きされることを避けることができます。

これにより、他のスクリプトやライブラリと干渉せずにイベントを追加できます。

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button id="myButton" onclick="alert('インラインイベントハンドラ')">クリック</button>
    <script>
      document.getElementById('myButton').addEventListener('click', function() {
        alert('追加のイベントハンドラ');
      });
    </script>
</body>
</html>

より柔軟なイベントハンドリング

addEventListenerを使用すると、イベントハンドラを削除するためのremoveEventListenerメソッドを使用できます。

これにより、特定の条件下でイベントハンドラを動的に削除することができます。

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button id="myButton">クリック</button>
    <script>
      const button = document.getElementById('myButton');
      function handleClick() {
        alert('ボタンがクリックされました！');
      }
      button.addEventListener('click', handleClick);
      // 条件に応じてイベントハンドラを削除
      // ここでは例としてすぐにイベントハンドラを削除しています
      button.removeEventListener('click', handleClick);
    </script>
</body>
</html>

動的に生成された要素に対してもイベントハンドラを設定できる

動的に生成された要素にイベントハンドラを設定する場合、要素生成後にイベントハンドラを設定する必要があります。

addEventListenerを使用することで、後から動的に生成された要素に対してもイベントハンドラを設定することができます。

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <script>
      document.addEventListener('click', function(event) {
        if (event.target.matches('#myButton')) {
          alert('ボタンがクリックされました！');
        }
      });
      // 新しいボタン要素を作成
      let button = document.createElement('button');
      // ボタンに id 属性とテキストを設定
      button.id = 'myButton';
      button.textContent = 'クリック';
      // ボタンを body の先頭に追加
      document.body.insertBefore(button, document.body.firstChild);
    </script>
</body>
</html>

モダンなイベントハンドリング

addEventListenerは、HTML5以降の標準的なイベントハンドリング方法で、多くのモダンブラウザでサポートされています。

これにより、より一貫性のあるコードを書きやすくなります。

Data on support for the addeventlistener feature across the major browsers from caniuse.com

同じクラスを持つ要素にイベントを登録する方法

JavaScriptのquerySelectorAllメソッドで要素を取得し、forEachループを使って各要素にイベントハンドラを追加することができます。

HTML
Copy
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JavaScript】イベントハンドラ</title>
</head>
<body>
    <button class="clickable">クリック 1</button>
    <button class="clickable">クリック 2</button>
    <button class="clickable">クリック 3</button>
    <script>
        // .clickableクラスを持つ全ての要素を取得
        const elements = document.querySelectorAll('.clickable');
        // 各要素にイベントハンドラを追加
        elements.forEach(function(element) {
            element.addEventListener('click', function() {
                alert(`${element.textContent} がクリックされました！`);
            });
        });
    </script>
</body>
</html>

-フロントエンド
-