JavaScript　イベントの取得方法と処理の実行：addEventListenerの使い方

JavaScriptにおけるaddEventListenerメソッドやonイベントハンドラを使ったイベントの取得方法と処理の実行について解説します。

JavaScriptでイベントを取得する方法って、どうしたらいいんですか？

イベントを取得する方法がいくつかあります。addEventListenerメソッドを使った方法がおすすめです。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

addEventListenerメソッドを使ったイベントの取得方法

addEventListenerメソッドは、特定のイベントが発生したときに実行する関数を登録するメソッドです。

以下のような形式で使います。

target.addEventListener(type, listener [, options]);

target：イベントを取得する要素を指定します。
type：取得するイベントの種類を指定します。例えば、click、mouseover、keydownなどがあります。
listener：イベントが発生したときに実行する関数を指定します。
options：オプションで、captureやonce、passiveなどを指定することができます。

例えば、クリックイベントを取得する場合は以下のように記述します。

document.getElementById("target").addEventListener("click", function() {
  console.log("クリックされました");
});

上記の例では、idが”target”の要素がクリックされたときに、コンソールに”クリックされました”という文字列が出力されます。

また、addEventListenerメソッドは同じイベントに対して複数の関数を登録することができます。以下のように、複数の関数を登録することができます。

document.getElementById("target").addEventListener("click", function() {
  console.log("関数1");
});

document.getElementById("target").addEventListener("click", function() {
  console.log("関数2");
});

　上記の例では、idが”target”の要素がクリックされたときに、”関数1″と”関数2″という文字列が順番にコンソールに出力されます。

addEventListenerメソッドは、複数のイベントを同時に取得することができるなど、柔軟な使い方ができるため、JavaScriptにおけるイベントの取得方法の中でも、最も一般的な方法の1つと言えます。

addEventListenerメソッドを使ったサンプルプログラム

この例では、ボタンをクリックすると、クリックされた回数がカウントアップされ、その回数がアラートで表示されるようになっています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>addEventListenerメソッドを使ったイベントの取得方法の例</title>
  </head>
  <body>
    <button id="myButton">クリック</button>
    <script>
      // ボタン要素を取得
      const myButton = document.getElementById('myButton');
      // クリック回数をカウントする変数
      let count = 0;
      // ボタンにイベントリスナーを登録
      myButton.addEventListener('click', () => {
        count++;
        alert(`クリックされました。クリック回数: ${count}`);
      });
    </script>
  </body>
</html>

　この例では、addEventListenerメソッドを使って、clickイベントの取得を行っています。addEventListenerメソッドの第1引数には、取得したいイベント名を、第2引数には、実行したい関数を指定します。関数の中では、クリックされた回数をカウントアップし、アラートでクリックされた回数を表示するようになっています。

onイベントハンドラ属性を使ったイベントの取得方法

　onイベントハンドラ属性は、HTML要素に直接書かれた属性で、指定されたイベントが発生したときに、属性値として指定された関数が実行される仕組みです。

以下のような形式で使います。

<要素名 onイベント名=”関数名”></要素名>

要素名：イベントを取得する要素を指定します。
イベント名：取得するイベントの種類を指定します。例えば、click、mouseover、keydownなどがあります。
関数名：イベントが発生したときに実行する関数を指定します。

例えば、クリックイベントを取得する場合は以下のように記述します。

<button onclick="console.log('クリックされました')">クリック</button>

　上記の例では、button要素がクリックされたときに、コンソールに”クリックされました”という文字列が出力されます。

　ただし、この方法は、複数のイベントを取得する場合や、イベントリスナーを複数登録する場合など、柔軟性に欠けるため、できるだけaddEventListenerメソッドを使うことが推奨されています。

　onイベントハンドラ属性は、簡単にイベントを取得することができるため、初心者向けのJavaScriptでよく使われます。ただし、onイベントハンドラ属性を使う場合は、HTMLとJavaScriptのコードが混在することになるため、保守性が低下するという問題があります。

CHECK!

onイベントハンドラ属性は、簡単にイベントを取得できるが、複数の関数を指定できないことや、addEventListenerメソッドに比べると柔軟性に欠けるため、できるだけaddEventListenerメソッドを使用するようにしましょう。

onイベントハンドラ属性を使ったイベントの取得方法のサンプルプログラム

　この例では、ボタンをクリックすると、クリックされた回数がカウントアップされ、その回数がアラートで表示されるようになっています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>onイベントハンドラ属性を使ったイベントの取得方法の例</title>
  </head>
  <body>
    <button id="myButton" onclick="countUp()">クリック</button>
    <script>
      // クリック回数をカウントする変数
      let count = 0;
      // クリックされたときに実行される関数
      function countUp() {
        count++;
        alert(`クリックされました。クリック回数: ${count}`);
      }
    </script>
  </body>
</html>

　この例では、onclick属性を使って、clickイベントの取得を行っています。onclick属性には、実行したい関数名を指定します。関数の中では、クリックされた回数をカウントアップし、アラートでクリックされた回数を表示するようになっています。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。