HTMLイベントは、要素をHTMLに起こる「事」です。
JavaScriptはHTMLページで使用されている場合、JavaScriptはこれらのイベントに「反応する」ことができます。
HTMLイベント
HTMLイベントは、ブラウザがないもの、またはユーザが行うものにすることができます。
ここではHTMLのイベントのいくつかの例は以下のとおりです。
- HTMLウェブページの読み込みが完了しました
- HTML入力フィールドが変更されました
- HTMLボタンがクリックされました
イベントが発生したとき、多くの場合、あなたが何かをしたいことがあります。
JavaScriptはイベントが検出されたときにコードを実行することができます。
HTMLは、HTML要素に追加する、JavaScriptコードと 、イベントハンドラ属性を可能にします。
単一引用符と:
< some-HTML-element
some-event = ' some JavaScript ' >
二重引用符:
< some-HTML-element
some-event = " some JavaScript " >
次の例では、 onclick (コード付き)属性は、button要素に追加されます。
上記の例では、JavaScriptコードが持つ要素の内容に変更id="demo" 。
次の例では、コードが(使用して、独自の要素の内容に変更this .innerHTML ):
JavaScriptコードは、多くの場合、いくつかの行の長さです。 関数を呼び出すイベント属性を表示するには、より一般的です。
共通のHTMLイベント
ここではいくつかの一般的なHTMLのイベントのリストです:
イベント | 説明 |
---|---|
onchange | HTML要素が変更されています |
onclick | ユーザーは、HTML要素をクリックします |
onmouseover | ユーザーは、HTML要素の上にマウスを移動します |
onmouseout | ユーザーは、HTML要素から離れてマウスを移動します |
onkeydown | ユーザは、キーボードのキーを押します |
onload | ブラウザがページの読み込みが完了しました |
リストには、はるかに長いです: JavaScriptのリファレンスHTML DOMイベントw3ii 。
JavaScriptは何ができますか?
イベントハンドラは、ユーザ入力、ユーザーアクション、およびブラウザのアクションを処理し、検証するために使用することができます。
- たびにページがロードを行うべきである事
- ページが閉じられたときに行われるべきもの
- ユーザーがボタンをクリックしたときに実行されるべきアクション
- ユーザがデータを入力すると確認されるべきコンテンツ
- もっと ...
多くの異なる方法がJavaScriptがイベントで動作させるために使用することができます。
- HTMLイベント属性は、直接JavaScriptコードを実行することができます
- HTMLイベント属性はJavaScript関数を呼び出すことができます
- あなたは、HTML要素に独自のイベントハンドラ関数を割り当てることができます
- あなたが送信されているか、処理されてからイベントを防ぐことができます
- もっと ...
あなたは内のイベントとイベントハンドラについてより多くを学ぶことができますHTML DOMの章。