その他のJavaScriptイベント処理方法：addEventListener と onclick に加えて知っておきたい方法

2024-04-13

JavaScript: addEventListener vs onclick の徹底比較

JavaScript におけるイベント処理は、ユーザーとのインタラクションを可能にし、動的な Web ページを作成するために不可欠な要素です。イベント処理には、主に addEventListener と onclick の 2つの方法が用いられます。

本記事では、addEventListener と onclick の違いを徹底的に比較し、それぞれのメリットとデメリット、具体的な使い分け方などをわかりやすく解説します。

イベント処理の基本

イベント とは、ユーザーが Web ページとインタラクションを起こした際に発生するアクションのことを指します。代表的なイベントとしては、クリック、マウスオーバー、キー入力などがあります。

イベント処理 とは、これらのイベントが発生した際に、あらかじめ定義した処理を実行することを指します。イベント処理によって、Web ページがユーザーの操作に応じて動的に変化し、インタラクティブなユーザー体験を提供できます。

addEventListener と onclick の概要

addEventListener と onclick はどちらも、イベント処理を行うためのメソッドですが、それぞれ異なる特徴を持っています。

addEventListener:
- JavaScript の標準的なイベント処理メソッド
- 柔軟性と拡張性に優れている
- 複数のイベントリスナーを登録できる
- イベント伝搬の制御が可能
- 比較的新しく、一部の古いブラウザでは非対応
onclick:
- HTML 属性として直接記述できる
- シンプルでわかりやすい
- 1つの要素に対して、1つのイベントリスナーしか登録できない
- すべてのブラウザで対応

項目	addEventListener	onclick
記述方法	JavaScript コード内で記述	HTML 属性として記述
柔軟性	柔軟性が高い	柔軟性が低い
拡張性	拡張性が高い	拡張性が低い
イベントリスナーの数	複数登録可能	1つしか登録できない
イベント伝搬の制御	可能	不可能
ブラウザ対応	一部の古いブラウザでは非対応	すべてのブラウザで対応

使い分け

addEventListener は、柔軟性と拡張性に優れているため、複雑なイベント処理や、複数のイベントリスナーを登録する必要がある場合に適しています。また、イベント伝搬の制御が必要な場合にも addEventListener を使用する必要があります。

一方、onclick はシンプルでわかりやすく、1つの要素に対して1つのイベントリスナーしか登録しない場合に適しています。HTML 属性として直接記述できるため、コードの見通しを良くすることができます。

コード例

例1: addEventListener を使用したイベント処理

const button = document.getElementById('myButton');

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

例2: onclick 属性を使用したイベント処理

<button onclick="alert('ボタンがクリックされました！')">クリック</button>

まとめ

この例では、ボタンがクリックされたときに、アラートダイアログを表示するイベント処理を実装します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>addEventListener サンプル</title>
</head>
<body>
  <button id="myButton">ボタン</button>

  <script>
    const button = document.getElementById('myButton');

    button.addEventListener('click', function() {
      alert('ボタンがクリックされました！');
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>onclick サンプル</title>
</head>
<body>
  <p id="myParagraph">初期メッセージ</p>
  <button onclick="changeParagraphText()">メッセージを変更</button>

  <script>
    function changeParagraphText() {
      const paragraph = document.getElementById('myParagraph');
      paragraph.textContent = 'メッセージが変更されました！';
    }
  </script>
</body>
</html>

説明

例1:
- alert('ボタンがクリックされました！'): この行は、アラートダイアログを表示します。
例2:
- <button onclick="changeParagraphText()">メッセージを変更</button>: この行は、ボタンに onclick 属性を設定します。この属性には、ボタンがクリックされたときに実行する JavaScript 関数の名前を指定します。
- function changeParagraphText() {... }: この関数は、myParagraph 要素の内容を "メッセージが変更されました！" に変更します。

これらの例は、addEventListener と onclick の基本的な使用方法を示しています。より複雑なイベント処理を行う場合は、それぞれのメソッドの詳細な仕様を refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript と https://www.w3schools.com/jsref/event_onclick.asp を参照してください。

JavaScript でイベントを処理するその他の方法

イベントオブジェクトは、イベントに関する情報を提供するオブジェクトです。イベントが発生したときに、イベントオブジェクトがイベントリスナーに渡されます。イベントオブジェクトには、イベントの種類、ターゲット要素、イベント発生時刻などの情報が含まれています。

const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log(event.type); // イベントの種類を出力
  console.log(event.target); // ターゲット要素を出力
  console.log(event.timeStamp); // イベント発生時刻を出力
});

イベントプロパティは、イベントオブジェクトに直接アクセスできるプロパティです。イベントプロパティには、イベントの種類、ターゲット要素、キーの状態などの情報が含まれています。

const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  if (event.ctrlKey) {
    console.log('Ctrlキーが押されています');
  }
  if (event.shiftKey) {
    console.log('Shiftキーが押されています');
  }
});

イベント伝搬とは、イベントがイベントリスナーに伝達される仕組みです。イベントは、イベント発生元から親要素に向かって伝搬します。イベントリスナーは、イベントが伝搬している間に捕捉することができます。

const div = document.getElementById('myDiv');
const button = document.getElementById('myButton');

div.addEventListener('click', function(event) {
  console.log('div要素がクリックされました');
});

button.addEventListener('click', function(event) {
  console.log('button要素がクリックされました');
  event.stopPropagation(); // イベント伝搬を停止
});

イベント委譲とは、イベントリスナーを親要素に登録し、イベント発生時に子要素からイベントを伝搬させる仕組みです。イベント委譲を使用すると、イベント処理のコードをより簡潔に記述することができます。

const div = document.getElementById('myDiv');
const button = document.getElementById('myButton');

div.addEventListener('click', function(event) {
  if (event.target === button) {
    console.log('button要素がクリックされました');
  }
});

DOM イベントレベルは、イベント処理の優先順位を制御する仕組みです。イベントレベルは、0 から 4 までの値で設定できます。イベントレベルが高いほど、イベント処理の優先順位が高くなります。

const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  event.eventPhase; // イベント処理のフェーズを出力
}, true);

addEventListener と onclick は、JavaScript でイベントを処理する最も一般的な方法ですが、他にもさまざまな方法があります。それぞれの方法の特徴を理解し、状況に応じて適切な方法を選択することが重要です。

javascript onclick addeventlistener