JavaScriptをHTML DOMイベント
HTML DOM JavaScriptは、HTMLがイベントに反応する能力を持っています。
例
イベントに反応
イベントが発生したときに我々は、ユーザーがHTML要素をクリックしたときのように、JavaScriptを実行することができます。
HTMLのイベント属性にユーザーが要素をクリックしたときにコードを実行するには、JavaScriptコードを追加します。
HTMLイベント例:
- ユーザは、マウスをクリックすると
- ページがロードされると
- イメージがロードされたとき
- マウスが要素の上に移動すると
- 入力フィールドが変更された場合
- あなたは、HTMLフォームを送信すると
- ユーザーがキーをトリガーすると
この例では、ときにクリックされた<H1>要素上のユーザーは、その内容を変更します:
例
<HTML>
<ボディ>
<H1のonclick = "this.innerHTML = 'メールで送信'">テキストをクリック!</ H1>
</ BODY>
</ HTML>
»をお試しください
この場合、イベントハンドラから関数を呼び出すには:
例
<HTML>
<ヘッド>
<スクリプト>
関数changetext(ID)
{
id.innerHTML = "メールで送信";
}
</スクリプト>
</ HEAD>
<ボディ>
<H1のonclick = "changetext(この)">テキストをクリック!</ H1>
</ BODY>
</ HTML>
»をお試しください
HTMLのイベント属性
HTML要素にイベントを割り当てるには、イベント属性を使用することができます。
上記の例では、関数は、ボタンがクリックされたときdisplayDateが実行される名前。
イベントを割り当てるには、HTMLのDOMを使用してください
HTML DOMは、HTML要素にイベントを割り当てるためにJavaScriptを使用することができます:
例
ボタン要素のonclickイベントに割り当てられました:
。のdocument.getElementById( "myBtnです」)のonclick =関数(){displayDate()};
</スクリプト>
»をお試しください
上記の例では、関数は、指定されたdisplayDateのid = myButn "HTML要素に割り当てられています。
Javascriptの関数が実行されたときにボタンをクリックします。
onloadとonunloadイベント
ユーザーが入力するか、ページを離れたときにonloadとonunloadをイベントがトリガされます。
onloadイベントは、訪問者が検出され、ページの正しいバージョンをロードするには、この情報に基づいているブラウザの種類とブラウザのバージョンを使用することができます。
onloadとonunloadイベントクッキーを処理するために使用することができます。
onchangeイベント
onchangeイベントは、多くの場合、使用する入力フィールドの検証を組み合わせました。
ここでのonchangeを使用する方法の例です。 ユーザは、入力フィールドの内容を変更したときに、大文字()関数を呼び出します。
onmouseoverイベントれるonmouseout
onmouseoverイベントONMOUSEOUT関数にHTML要素または除去要素の上部にときに、ユーザのマウスの動きをトリガーするために使用することができます。
れるonmousedown、onMouseUpのとonclickのイベント
れるonmousedown、onMouseUpのとonclickのマウスクリックイベントのすべての部分を構成しています。 マウスクリックの完了は、それがonclickイベントをトリガするときにまず、マウスボタンが離されたときに、マウスボタン、イベントれるonmousedownトリガーをクリックすると、それは、最終的にイベントをonMouseUpのトリガ、およびます。
例
シンプルれるonmousedown-onMouseUpのインスタンス:
より多くの例
れるonmousedownおよびonMouseUpの
ユーザは、マウスボタン、画像の交換を押下します。
onloadイベント
ページの読み込みが終了すると、メッセージボックスを表示します。
ONFOCUS
入力欄にフォーカスがあるときに、背景色を変更します。
マウスイベント
ポインタが要素の上に移動すると、その色を変更し、テキストのうち、ポインタが移動し、その色が再びいつ変更されます。