HTMLのDOMイベント
HTML DOMは、JavaScriptのイベントはHTMLに対応することができます。
例
イベントに反応
イベントが発生すると、あなたは、ユーザーがHTML要素をクリックしたときのように、JavaScriptを実行することができます。
ユーザーが要素をクリックしたときにコードを実行するには、イベント属性HTMLにJavaScriptコードを追加します。
HTMLイベント例:
- ユーザは、マウスをクリックすると
- ページがロードされると
- イメージがロードされたとき
- マウスが要素の上に移動すると
- 入力フィールドが変更された場合
- HTMLフォームが送信されると
- ユーザーがキーをトリガーすると
ユーザーがクリックしたときに、この例では、それは<H1>要素の内容を変更します:
例
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
»をお試しください
この場合、関数は、イベントハンドラから呼び出されます。
例
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>
»をお試しください
HTMLのイベント属性
HTML要素にイベントを割り当てるには、イベント属性を使用することができます。
ボタンがクリックされたときに、上記の例では、それはdisplayDateという名前の関数を実行します。
イベントを割り当てるには、HTMLのDOMを使用してください
HTML DOMイベントは、HTML要素を割り当てるためにJavaScriptを使用することができます:
例
割り当てられたのonclickイベントボタンエレメント:
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>
»をお試しください
上記の例では、displayDateという名前の関数は、ID = myButn "HTML要素に割り当てられます。
ボタンがクリックされると、機能実行。
onloadとonunloadイベント
ユーザーが入力するか、ページを離れたとき、それはonloadイベントとonunloadイベントがトリガされます。
オンロードイベントは、ページの異なるバージョンをロードするための情報に基づいて、順番に、訪問者のブラウザの種類やバージョンを確認するために使用することができます。
onloadイベントやクッキーを処理するためのイベントをONUNLOAD。
onchangeイベント
onchangeイベントは、多くの場合、入力フィールドを検証するために使用されます。
次の例は、のonchange使用する方法を示しています。 ユーザは、入力フィールドの内容を変更したときに大文字()関数と呼ばれます。
onmouseoverイベントれるonmouseout
onmouseoverイベントONMOUSEOUTマウスポインタに、または要素の外に移動したときに機能をトリガーするために使用することができます。
れるonmousedown、onMouseUpのとonclickのイベント
れるonmousedown、onMouseUpのonclickのイベントは、マウスクリックや全体のプロセスです。 マウスボタンがクリックされたときにまず、イベントをれるonmousedownトリガー、マウスボタンが離されたときに、それがイベントをonMouseUpの引き金となり、最終的には、マウスを[完了]をクリックしたときに、onclickのイベントがトリガされます。
HTML DOMイベントオブジェクトのリファレンス
各イベントの詳細と例については、私たちをご覧くださいHTMLのDOMのリファレンスマニュアルを 。