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 | ユーザーがページを閉じます。 |