addEventListenerとONの違いは？

addEventListener() と on プロパティの違い

JavaScriptを使ってWebページに動きを加える際、ユーザーの操作やブラウザイベントに対応して特定の処理を実行することがよくあります。このようなイベント処理を実装するために、addEventListener() と on プロパティという2つの主要な方法があります。この記事では、addEventListener() と on プロパティの違い、それぞれのメリット・デメリット、そして適切な使用方法について詳しく解説します。

addEventListener() 関数

addEventListener() は、特定の要素に対して特定のイベントリスナーを追加するメソッドです。イベントリスナーとは、指定されたイベントが発生したときに実行される関数のことです。

addEventListener() の構文

element.addEventListener(event, listener, options);

element: イベントリスナーを追加する対象の要素
event: リッスンするイベントの種類 (例: 'click', 'mouseover', 'submit' など)
listener: イベント発生時に実行される関数
options: イベントリスナーの動作を制御するオプションオブジェクト (省略可能)

addEventListener() のメリット

複数のイベントハンドラを設定できる: addEventListener() を使用すると、1つの要素に対して同じイベントタイプの複数のイベントハンドラを設定できます。これは、異なるライブラリやスクリプトが同じイベントに対して異なる処理を実行する必要がある場合に特に役立ちます。
イベントのバブリングとキャプチャリングを制御できる: options 引数を使用して、イベントのバブリングフェーズとキャプチャリングフェーズのどちらでリスナーを実行するかを指定できます。
イベントリスナーを削除できる: removeEventListener() メソッドを使用すると、追加したイベントリスナーを削除できます。これは、イベントハンドラを動的に追加および削除する必要がある場合に便利です。

addEventListener() の例

<button id="myButton">クリックしてください</button>
<script>
  const button = document.getElementById('myButton');

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

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

この例では、1つのボタン要素に2つの click イベントリスナーが追加されています。ボタンをクリックすると、両方の関数が実行され、コンソールにメッセージが出力され、アラートが表示されます。

on プロパティ

on プロパティは、HTML要素の属性として、またはJavaScriptで要素のプロパティとして使用できます。特定のイベントに対して1つのイベントハンドラを設定するために使用されます。

on プロパティの構文

HTML:
```
<element onevent="JavaScript code">
```

JavaScript:

element.onevent = function() {
  JavaScript code;
};

element: イベントハンドラを設定する対象の要素
onevent: イベントの種類 (例: onclick, onmouseover, onsubmit など)
JavaScript code: イベント発生時に実行される JavaScript コード

on プロパティのメリット

シンプルで使いやすい: on プロパティは、addEventListener() よりもシンプルで直感的に使用できます。特に、イベント処理の概念に慣れていない初心者にとっては扱いやすい場合があります。

on プロパティのデメリット

1つのイベントに1つのハンドラしか設定できない: on プロパティを使用する場合、要素とイベントタイプの組み合わせごとに1つのイベントハンドラしか設定できません。同じイベントに複数のハンドラを設定しようとすると、最後に設定されたハンドラだけが有効になります。
イベントのバブリングとキャプチャリングを制御できない: on プロパティでは、イベントのバブリングフェーズでしかリスナーを実行できません。
イベントリスナーを削除するのが難しい: on プロパティで設定したイベントリスナーを削除するには、イベントハンドラを null に設定する必要があります。

on プロパティの例

<button id="myButton">クリックしてください</button>
<script>
  const button = document.getElementById('myButton');

  button.onclick = function() {
    console.log('ボタンがクリックされました！');
  };
</script>

この例では、onclick プロパティを使用してボタンに click イベントハンドラが設定されています。ボタンをクリックすると、関数が実行され、コンソールにメッセージが出力されます。

addEventListener() と on プロパティの比較表

機能	`addEventListener()`	`on` プロパティ
複数のイベントハンドラ	可能	不可能
イベントのバブリングとキャプチャリングの制御	可能	不可能
イベントリスナーの削除	`removeEventListener()` を使用	イベントハンドラを `null` に設定
複雑さ	より複雑	よりシンプル

どちらの方法を使うべきか？

ほとんどの場合、addEventListener() を使用することが推奨されます。理由としては、複数のイベントハンドラを設定できる柔軟性、イベントのバブリングとキャプチャリングの制御が可能であること、そしてイベントリスナーを削除できることが挙げられます。on プロパティは、単純なイベント処理を行いたい場合や、迅速にプロトタイプを作成する際には便利ですが、複雑なシナリオでは addEventListener() が適しているでしょう。

まとめ

イベント処理を行う際に、addEventListener() と on プロパティの違いを理解しておくことは重要です。各方法のメリット・デメリットを考慮し、プロジェクトの要件や状況に応じて適切な方法を選択することが、スムーズな開発に繋がります。

その他の参考記事:HTML DOMイベントオブジェクト