JavaScriptイベント
HTMLイベントは、HTML要素に対して発生する"事柄"です。
HTMLページでJavaScriptが使用されている場合、JavaScriptはこれらのイベントに"反応"します。
HTMLイベント
HTMLイベントは、ブラウザが行うものでも、ユーザーが行うものでもかまいません。
HTMLイベントの例を次に示します。
- HTML Webページの読み込みが完了しました
- HTML入力フィールドが変更されました
- HTMLボタンがクリックされました
多くの場合、イベントが起こると、何かをしたくなるかもしれません。
JavaScriptを使用すると、イベントが検出されたときにコードを実行できます。
HTMLでは、JavaScriptのコードを使用してイベントハンドラー属性をHTML要素に追加できます。
一重引用符の場合:
二重引用符の場合:
次の例では、onclick属性(コード付き)が<button>要素に追加されます。
上の例では、JavaScriptコードはid="demo""の要素のコンテンツを変更します。
次の例では、コードは独自の要素のコンテンツを変更します(this.innerHTMLを使用)。
JavaScriptコードは多くの場合、数行の長さになります。イベント属性が関数を呼び出すことの方が一般的です。
一般的なHTMLイベント
一般的なHTMLイベントのリストを次に示します。
|
イベント |
説明 |
|---|---|
| onchange | HTML要素が変更された |
| onclick | ユーザーがHTML要素をクリックする |
| onmouseover | ユーザーがHTML要素の上にマウスを移動する |
| onmouseout | ユーザーがHTML要素からマウスを離す |
| onkeydown | ユーザーがキーボードのキーを押す |
| onload | ブラウザがページの読み込みを完了する |
こちらのリストはもっと長くなります。JavaScriptリファレンスHTML DOMイベントを参照して下さい。
JavaScriptイベントハンドラー
イベント ハンドラーを使用して、ユーザー入力、ユーザーアクション、およびブラウザー アクションを処理および検証できます。
- ページが読み込まれるたびに実行する必要があること
- ページを閉じたときにすべきこと
- ユーザーがボタンをクリックしたときに実行するアクション
- ユーザーがデータを入力するときに検証する必要があるコンテンツ
- など...
JavaScriptでイベントを処理するには、さまざまな方法を使用できます。
- HTMLイベント属性はJavaScriptコードを直接実行できます
- HTMLイベント属性はJavaScript関数を呼び出すことができます
- 独自のイベントハンドラー関数をHTML要素に割り当てることができます
- イベントの送信または処理を防ぐことができます
- など...
イベントとイベントハンドラーについては、HTML DOMの章で詳しく説明します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。