JavaScript HTML DOM イベント
HTML DOM により、JavaScript は HTML イベントに反応できるようになります。
例
イベントに反応する
イベント発生時に JavaScript を実行できます。たとえば、ユーザーが HTML 要素をクリックしたときなどです。
ユーザーが要素をクリックしたときにコードを実行するには、HTML イベント属性に JavaScript コードを追加します：
HTML イベントの例：
- ユーザーがマウスをクリックしたとき
- ウェブページが読み込まれたとき
- 画像が読み込まれたとき
- マウスが要素の上に移動したとき
- 入力フィールドが変更されたとき
- HTML フォームが送信されたとき
- ユーザーがキーを押したとき
この例では、ユーザーが <h1> 要素をクリックすると、その内容が変更されます：
例
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
試してみる »
この例では、イベントハンドラから関数を呼び出します：
例
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
試してみる »
HTML イベント属性
HTML 要素にイベントを割り当てるには、イベント属性を使用できます。
上記の例では、displayDate という名前の関数がボタンがクリックされたときに実行されます。
HTML DOM を使用してイベントを割り当てる
HTML DOM を使用すると、JavaScript を使用して HTML 要素にイベントを割り当てることができます：
例
button 要素に onclick イベントを割り当てる：
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
試してみる »
上記の例では、displayDate という名前の関数が id="myBtn" の HTML 要素に割り当てられています。
ボタンをクリックすると JavaScript 関数が実行されます。
onload と onunload イベント
onload と onunload イベントは、ユーザーがページに出入りするときにトリガーされます。
onload イベントは、訪問者のブラウザタイプとブラウザバージョンを検出し、その情報に基づいてウェブページの適切なバージョンを読み込むために使用できます。
onload と onunload イベントは、Cookie の処理に使用できます。
onchange イベント
onchange イベントは、入力フィールドの検証と組み合わせてよく使用されます。
以下は、onchange の使用方法の例です。ユーザーが入力フィールドの内容を変更すると、upperCase() 関数が呼び出されます。
onmouseover と onmouseout イベント
onmouseover と onmouseout イベントは、ユーザーのマウスが HTML 要素の上に移動したとき、または要素から離れたときに関数をトリガーするために使用できます。
onmousedown、onmouseup、および onclick イベント
onmousedown、onmouseup、onclick は、マウスクリックイベントのすべての部分を構成します。まず、マウスボタンをクリックすると onmousedown イベントがトリガーされ、マウスボタンを離すと onmouseup イベントがトリガーされ、最後にマウスクリックが完了すると onclick イベントがトリガーされます。
例
簡単な onmousedown-onmouseup の例：
その他の例
onmousedown と onmouseup
ユーザーがマウスボタンを押したとき、画像を別の画像に変更します。
onload
ページの読み込みが完了したとき、ダイアログボックスを表示します。
onfocus
入力フィールドがフォーカスを取得したとき、その背景色を変更します。
マウスイベント
ポインタが要素の上に移動したとき、その色を変更します。ポインタがテキストから離れると、再び色を変更します。