イベントとは、リンクやボタンをクリックしたり、キーボードを操作したり、ページの読み込みが完了したタイミングや次のページに行く直前など、様々なタイミングで発生します。
一例を挙げると、
- ユーザーがある要素の上をマウスでクリックする
- ユーザーがある要素の上にカーソルを持ってくる
- ユーザーが画面をスクロールさせる
- ウェブページのロードの完了
- フォームの送信
などなどたくさんあります。
全てを挙げるとキリがないので、詳細はMDNのEvent リファレンスでご確認ください↓
developer.mozilla.orgイベントハンドラーとは
イベントハンドラーとは、イベントに発火した時に実行されるコードのブロックのことを指す。
イベントの発火に対する応答としてコードのブロックが実行されるように定義する事を、イベントハンドラーを登録する、と言う。
イベントリスナーとは
イベントハンドラーはときにイベントリスナーと呼ばれます。
厳密に言えばイベントハンドラーとイベントリスナーは一緒に動作する別のものです。
- イベントリスナーはイベントの発生を監視する
- イベントハンドラーは発生したイベントの応答として動作するコードを指す
イベントの簡単な例
イベントの簡単な例を書いてみます。
See the Pen Event by nkmr (@nkmr_whoo) on CodePen.
↑のボタンをクリックしてdevツールのconsoleをご確認いただくと『HELLO WORLD!』と表示されます。
このボタンをクリックしたタイミングで発生しているのがイベントです。
上記コードは定数 btn に HTML の button に付与したID btn を取得して代入し、その定数btn をクリックするとconsoleに『HELLO WORLD!』の文字列が表示される簡単なプログラムです。
インラインイベントハンドラーを使わない方がいい理由
インラインイベントハンドラーとはHTMLのタグの中にJavaScriptコードを直接書き込むことで、属性値がイベント発生時に実行したいJavaScriptコードそのものです。
例としていろんな媒体でよく目にするのが、
<button onclick="hoge()">hogehoge</button>上記のコードはHTMLのbuttonタグの中にJavaScriptの関数を発火させるクリックイベントを直接書いています。
このようなインラインイベントハンドラーは
- 可読性
- 保守性
- 拡張性
の観点から使わない方がいいとされています。
