JavaScriptイベント
HTMLイベントは、HTML要素に発生する「もの」です。
JavaScriptがHTMLページで使用されている場合、JavaScriptはこれらのイベントに 「反応」することができます。
HTMLイベント
HTMLイベントは、ブラウザーが実行するものでも、ユーザーが実行するものでもかまいません。
HTMLイベントの例を次に示します。
- HTMLWebページの読み込みが完了しました
- HTML入力フィールドが変更されました
- HTMLボタンがクリックされました
多くの場合、イベントが発生したときに、何かをしたいと思うかもしれません。
JavaScriptを使用すると、イベントが検出されたときにコードを実行できます。
HTMLを使用すると、JavaScriptコードを使用してイベントハンドラー属性をHTML要素に追加できます。
一重引用符付き：
<element
event='some JavaScript'>
二重引用符付き：
<element
event="some JavaScript">
次の例では、onclick属性（コード付き）が
<button>要素に追加されています。
例
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
上記の例では、JavaScriptコードはid = "demo"で要素のコンテンツを変更します。
this.innerHTML次の例では、コードは（を使用して）それ自体の要素のコンテンツを変更します。
例
<button onclick="this.innerHTML = Date()">The time is?</button>
JavaScriptコードは、多くの場合、数行の長さです。関数を呼び出すイベント属性を確認するのがより一般的です。
例
<button onclick="displayDate()">The time is?</button>
一般的なHTMLイベント
一般的なHTMLイベントのリストは次のとおりです。
| イベント | 説明 |
|---|---|
| onchange | HTML要素が変更されました |
| onclick | ユーザーがHTML要素をクリックします |
| オンマウスオーバー | ユーザーがHTML要素の上にマウスを移動します |
| onmouseout | ユーザーがマウスをHTML要素から離します |
| オンキーダウン | ユーザーがキーボードのキーを押す |
| オンロード | ブラウザがページの読み込みを終了しました |
リストははるかに長くなります：W3SchoolsJavaScriptリファレンスHTMLDOMイベント。
JavaScriptイベントハンドラー
イベントハンドラーを使用して、ユーザー入力、ユーザーアクション、およびブラウザーアクションを処理および検証できます。
- ページが読み込まれるたびに実行する必要があること
- ページを閉じたときにすべきこと
- ユーザーがボタンをクリックしたときに実行する必要のあるアクション
- ユーザーがデータを入力するときに確認する必要があるコンテンツ
- もっと ...
JavaScriptをイベントで機能させるには、さまざまな方法を使用できます。
- HTMLイベント属性はJavaScriptコードを直接実行できます
- HTMLイベント属性はJavaScript関数を呼び出すことができます
- 独自のイベントハンドラー関数をHTML要素に割り当てることができます
- イベントの送信や処理を防ぐことができます
- もっと ...
HTML DOMの章で、イベントとイベントハンドラーについてさらに詳しく学習します。