![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/08/14
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、イベントハンドラーとイベントリスナーの違い
について説明いたします。
イベント
ウィンドウ上のプログラムでマウスクリックや
入力によって所定の処理が始まるが、
この時のマウスクリックなどの動作を「イベント」という。
イベントハンドラー
イベント発生時に行う処理内容を記述したプログラム（関数）を
「イベントハンドラー」という。
イベントを設定したい要素に対して、
onイベント名プロパティを使用して関数を代入し
実行したい内容を記述する。
|
1 2 3 4 5 |
// 名前付き関数を使用した場合 取得した要素.onイベント名 = 関数名; // 無名関数を使用した場合 取得した要素.onイベント名 = function() { 処理内容を記述する } |
イベントハンドラーは、ひとつのイベントしか登録できない！
＊ 豆知識 ＊
「handle(ハンドル)」にはさばく、処理するという意味がある。
イベントに対する処理を行うもの ＝ イベントハンドラーと呼ばれる。
「アクションに対して、所定の処理を起動する」
プログラミングスタイルのことを
「イベント駆動型プログラミング」と呼ばれます。
インラインイベントハンドラー
最初期のイベントハンドラーにインラインイベントハンドラー
（イベントハンドラーHTML属性）があり、
属性値がイベント発生時に実行したい
JavaScriptのコードそのものになっている。
|
1 2 |
<!-- clsクラスがついたり消えたりするボタン --> <button onclick="document.querySelector('.title').classList.toggle('cls');">ボタン</button> |
ちょっとした動作をつける際に簡単に使えるものになるが、
コードが肥大化してくるとあっという間に手が付けれない、
効率の悪いものになってしまう。
コードを書く際にHTMLとJavaScriptを混在させると、
読みにくくなり可読性が落ちてしまうため、
JavaScriptのコードはHTMLのコードと分けて記述する方がよい。
イベントリスナー
イベントの発生を監視し、イベントが発生した際に
呼び出す処理（関数）のこと。
addEventListenerメソッドの第一引数にイベントを指定し、
第二引数に実行したい処理内容を記述する。
イベントリスナーは複数のイベント処理を登録することが可能
|
1 2 3 4 5 6 7 8 |
// 名前付き関数を使用した場合 取得した要素.addElementListener( "イベント", "コールバック関数"); // 無名関数を使用した場合 取得した要素.addElementListener( "イベント", function() { 処理内容を記述する }) |
イベントの削除
|
1 |
取得した要素.removeEventListener( "イベント", "削除したいイベントリスナー関数名") |
HTMLの基本動作のキャンセル方法
event.preventDefault()はイベントが起こったときの
基本動作をキャンセルするもので、
インターフェイスのメソッドである。
|
1 |
event.preventDefault(); |
HTMLタグには基本動作があらかじめ定義されているものがあり、
必要ない場合キャンセルすることができる。
イベントハンドラーとイベントリスナーの違い
イベントハンドラーは、イベントが発生した際に「応答として動作する処理」で、
イベントリスナーはイベントの発生を監視し、
イベントが発生した際に「呼び出す処理」のこと
イベントハンドラーは、ひとつのイベントしか登録できないが、
記述が比較的簡素である。
同じイベントに再度イベント処理を登録することで、
後から登録したハンドラーを上書きすることができる。
ハンドラーの削除がしたい場合は、
|
1 |
取得した要素.onイベント名 = null; |
で削除が可能。
イベントリスナーは、複数のイベント処理を登録できるが、
記述が複雑になりやすい。
しかし、必要な時にリスナーを複数追加できることは、
利点となっている。
まとめ
今回は、イベントハンドラーとイベントリスナーについての内容でした。
ここまで、読み進めていただきありがとうございます。
