HTML DOMは、JavaScriptがHTMLイベントに対応することができます：
イベントへの反応
イベントが発生したときにJavaScriptは、ユーザがHTML要素をクリックしたときと同様に、実行することができます。
ユーザーが要素をクリックしたときにコードを実行するには、HTMLイベント属性にJavaScriptコードを追加します。
onclick=JavaScript
HTMLイベントの例：
- ユーザは、マウスをクリックすると
- Webページがロードされたとき
- 画像がロードされたとき
- マウスが要素の上に移動すると
- 入力フィールドが変更された場合
- HTMLフォームが送信されると
- ユーザは、キーストローク時
この例では、コンテンツ<h1>要素は、ユーザーがそれをクリックしたときに変更されます。
例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
»それを自分で試してみてください この例では、関数は、イベントハンドラから呼び出されます。
例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
»それを自分で試してみてください HTMLのイベント属性
HTML要素にイベントを割り当てるには、イベント属性を使用することができます。
上記の例では、名前の関数displayDateボタンがクリックされたときに実行されます。
HTML DOMを使用したイベントの割り当て
HTML DOMはJavaScriptを使用してHTML要素にイベントを割り当てることができます：
例
button要素にonclickイベントを割り当てます。
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
»それを自分で試してみてください 上記の例では、という名前の関数displayDate持つHTML要素に割り当てられているid="myBtn" 。
ボタンがクリックされたときに機能が実行されます。
onloadとonunloadイベント
onloadとonunloadユーザーが入力するか、ページを離れたときにイベントがトリガされます。
onloadイベントは、訪問者のブラウザの種類とブラウザのバージョンを確認し、その情報に基づいてウェブページの適切なバージョンをロードするために使用することができます。
onloadとonunloadイベントは、クッキーに対処するために使用することができます。
onchangeイベント
onchangeイベントは、多くの場合、入力フィールドの検証と組み合わせて使用されます。
以下の使用方法の一例であるonchange 。 upperCase()ユーザが入力フィールドの内容を変更したときに機能が呼び出されます。
onmouseoverとonmouseoutイベント
onmouseoverとonmouseoutイベントは、ユーザーがマウスオーバー時に機能をトリガするために使用することができ、または、HTML要素のうち：
onmousedown 、 onmouseupとonclickイベント
onmousedown 、 onmouseup 、とonclickイベントは、マウスクリックのすべての部分です。 マウスボタンがクリックされると、まずonmousedownイベントがトリガされ、マウスボタンが離されたときに、 onmouseupマウスクリックが完了したときに、イベントがトリガされ、最後に、 onclickイベントがトリガされます。
その他の例
れるonmousedownおよびonMouseUpの
ユーザーがマウスボタンを押しているときの画像を変更します。
onloadイベント
ページの読み込みが完了したときに警告ボックスを表示します。
ONFOCUS
それがフォーカスを取得したとき、入力フィールドの背景色を変更します。
マウスイベント
カーソルが上を移動する要素の色を変更します。
HTML DOMイベントオブジェクトのリファレンス
すべてのHTML DOMイベントのリストについては、当社の完全なを見てHTML DOMイベントオブジェクトのリファレンス 。