DHTML イベントハンドラ(イベントハンドラ)

イベントが発生したときにイベントハンドラを通じて要素に対して操作を行うことができます。

注記:ほとんどのDHTMLの例ではIE 4.0+、Netscape 7+、またはOpera 7+が必要です!

onmouseover と onmouseout
マウスカーソルが要素に移動し、移動したときに要素の色を変更する方法はどうですか。
onclick
ライトを点灯します。画像をクリックすると画像が変わり、もう一度クリックすると元の画像に戻るようにする方法はどうですか。
onmousedown と onmouseup
この回では、マウスボタンを押したときにだけライトが点灯します。
onload
ページが完全に読み込まれたときにポップアップを表示します。

イベントハンドラ

イベントハンドラを通じて、特定のイベントが発生したときに特定の要素に対して特定の操作を行うことができます:要素がクリックされたとき、ページが読み込まれたとき、フォームが送信されたときなどです。

<h1 onclick="style.color='red'">クリックしてください</h1>

上記の例では、ユーザーがタイトルをクリックすると、タイトルが赤色に変わるように定義されています。

ページのhead部分にスクリプトを追加して、イベントハンドラから関数を呼び出すこともできます:

<html>
<head>
<script type="text/javascript">
function changecolor()
{
document.getElementById('header').style.color="red"
}
</script>
</head>
<body>
<h1 id="header" onclick="changecolor()">クリックしてください</h1>
</body>
</html>

HTML 4.0 イベントハンドラ

イベント ...が発生したときに
onabort ユーザーがページの読み込みを中止します。
onblur ユーザーがオブジェクトから離れます。
onchange ユーザーがオブジェクトの値を変更します。
onclick ユーザーがオブジェクトをクリックします。
ondblclick ユーザーがオブジェクトをダブルクリックします。
onfocus ユーザーがオブジェクトをアクティブにします。
onkeydown キーボードを押します。
onkeypress キーボードを押します。
onkeyup キーボードを離します。
onload

ページが読み込まれました。

注記:Netscapeで、ページが読み込まれたときにこのイベントが発生します。

onmousedown ユーザーがマウスボタンを押します。
onmousemove マウスカーソルがオブジェクト上で移動します。
onmouseover マウスカーソルがオブジェクトに移動します。
onmouseout マウスカーソルがオブジェクトから外れます。
onmouseup ユーザーがマウスボタンをリリースします。
onreset ユーザーがフォームをリセットします。
onselect ユーザーがページ上の内容を選択します。
onsubmit ユーザーがフォームを提出します。
onunload ユーザーがページを閉じます。