HTML DOMは、JavaScriptがHTMLイベントに反応することを可能にします：
ユーザがHTML要素をクリックするなどのイベントが発生したときに、JavaScriptを実行することができます。
ユーザが要素をクリックしたときにコードを実行するには、HTMLイベント属性にJavaScriptコードを追加します：
onclick=JavaScript
HTML イベントの例：
この例では、ユーザが<h1>要素をクリックすると、要素のコンテンツが変更されます：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
Try it Yourself »
この例では、イベントハンドラから関数が呼び出されます：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Try it Yourself »
イベントをHTML要素に割り当てるには、イベント属性を使用できます。
上の例では、ボタンをクリックするとdisplayDateという名前の関数が実行されます。
HTML DOMは、JavaScriptを使用してHTML要素にイベントを割り当てることを可能にします：
ボタン要素にonclickイベントを割り当てます：
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Try it Yourself »
上の例では、id="myBtn"のHTML要素に displayDate という名前の関数が割り当てます。
ボタンがクリックされたときに関数は実行されます。
onloadイベントとonunloadイベントは、ユーザがページに出入りしたときにトリガーされます。
onloadイベントは、訪問者のブラウザの種類とブラウザのバージョンを確認し、その情報に基づいて適切なバージョンのWebページをロードするために使用できます。
onloadイベントとonunloadイベントは、cookieを処理するために使用できます。
onchangeイベントは、入力フィールドの検証と組み合わせてよく使われます。
onchangeを使用する方法の例を下に示します。ユーザが入力フィールドの内容を変更すると、upperCase()関数が呼び出されます。
onmouseoverとonmouseoutイベントは、ユーザがHTML要素の上または外にマウスを置いたときに、関数をトリガーするために使用することができます：
onmousedown、onmouseup、onclickイベントは、マウスクリックのすべてです。まず、マウスボタンをクリックするとonmousedownイベントがトリガされ、 マウスボタンを離すとonmouseupイベントがトリガされ、最後にマウスクリックが完了するとonclickイベントがトリガされます。
onmousedown と onmouseup
ユーザがマウスボタンを押している間、画像を変更します。
onload
ページの読み込みが完了したら、アラートボックスを表示します。
onfocus
入力フィールドがフォーカスを取得したときに、背景色を変更します。
Mouse イベント
カーソルがその上に移動したときに要素の色を変更します。
すべてのHTML DOMイベントのリストについては、完全な HTML DOM イベント・オブジェクト・リファレンスをご覧ください。
Exercise 1 » Exercise 2 » Exercise 3 »