JavaScript イベント
HTMLイベントは、HTML要素に起こる「出来事」です。
HTMLページでJavaScriptを使用すると、JavaScriptはこれらのイベントに「反応」することができます。
HTMLイベント
HTMLイベントは、ブラウザが行うこともありますし、ユーザーが行うこともあります。
以下はHTMLイベントの例です:
- HTMLウェブページの読み込みが完了したとき
- HTMLの入力フィールドが変更されたとき
- HTMLのボタンがクリックされたとき
イベントが発生すると、何かしらの動作を行いたい場合があります。
JavaScriptを使うと、イベントが検出されたときにコードを実行することができます。
HTMLでは、JavaScriptコードを含むイベントハンドラ属性をHTML要素に追加することができます。
シングルクォートを使用:
<element event='some JavaScript'>ダブルクォートを使用:
<element event="some JavaScript">次の例では、onclick属性（コード付き）が<button>要素に追加されています:
例
<button onclick="document.getElementById('demo').innerHTML = Date()">現在時刻は？</button>上記の例では、JavaScriptコードがid=”demo”の要素の内容を変更しています。
次の例では、コードが自分自身の要素の内容を変更しています（this.innerHTMLを使用）:
例
<button onclick="this.innerHTML = Date()">現在時刻は？</button>JavaScriptコードはしばしば複数行にわたります。イベント属性で関数を呼び出すのが一般的です:
例
<button onclick="displayDate()">現在時刻は？</button>一般的なHTMLイベント
以下は一般的なHTMLイベントの一部です:
| イベント | 説明 |
|---|---|
| onchange | HTML要素が変更されたとき |
| onclick | ユーザーがHTML要素をクリックしたとき |
| onmouseover | ユーザーがHTML要素にマウスを乗せたとき |
| onmouseout | ユーザーがHTML要素からマウスを離したとき |
| onkeydown | ユーザーがキーボードのキーを押したとき |
| onload | ブラウザがページの読み込みを完了したとき |
このリストはさらに長くなります: W3Schools JavaScript Reference HTML DOM Events。
JavaScriptイベントハンドラ
イベントハンドラは、ユーザーの入力やブラウザのアクションを処理し、検証するために使用することができます:
- ページが読み込まれるたびに行うべきこと
- ページが閉じられるときに行うべきこと
- ボタンをクリックしたときに実行されるアクション
- ユーザーがデータを入力したときに検証される内容
- その他…
多くの異なる方法が存在し、JavaScriptをイベントと連携させるために使用できます:
- HTMLイベント属性はJavaScriptコードを直接実行することができます
- HTMLイベント属性はJavaScript関数を呼び出すことができます
- 独自のイベントハンドラ関数をHTML要素に割り当てることができます
- イベントの送信または処理の防止ができます
- その他…