Latest web development tutorials

HTMLのDOMイベント

HTML DOMは、JavaScriptのイベントはHTMLに対応することができます。

Mouse Over Me
Click Me


イベントに反応

イベントが発生すると、あなたは、ユーザーがHTML要素をクリックしたときのように、JavaScriptを実行することができます。

ユーザーが要素をクリックしたときにコードを実行するには、イベント属性HTMLにJavaScriptコードを追加します。

onclick=JavaScript

HTMLイベント例:

  • ユーザは、マウスをクリックすると
  • ページがロードされると
  • イメージがロードされたとき
  • マウスが要素の上に移動すると
  • 入力フィールドが変更された場合
  • HTMLフォームが送信されると
  • ユーザーがキーをトリガーすると

ユーザーがクリックしたときに、この例では、それは<H1>要素の内容を変更します:

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>

»をお試しください

この場合、関数は、イベントハンドラから呼び出されます。

<!DOCTYPE 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要素にイベントを割り当てるには、イベント属性を使用することができます。

ボタン要素のonclickイベントに割り当てられました:

<button onclick =" displayDate() ">Try it</button>

»をお試しください

ボタンがクリックされたときに、上記の例では、それはdisplayDateという名前の関数を実行します。


イベントを割り当てるには、HTMLのDOMを使用してください

HTML DOMイベントは、HTML要素を割り当てるためにJavaScriptを使用することができます:

割り当てられたのonclickイベントボタンエレメント:

<script>
document.getElementById("myBtn"). onclick =function(){ displayDate() };
</script>

»をお試しください

上記の例では、displayDateという名前の関数は、ID = myButn "HTML要素に割り当てられます。

ボタンがクリックされると、機能実行。


onloadとonunloadイベント

ユーザーが入力するか、ページを離れたとき、それはonloadイベントとonunloadイベントがトリガされます。

オンロードイベントは、ページの異なるバージョンをロードするための情報に基づいて、順番に、訪問者のブラウザの種類やバージョンを確認するために使用することができます。

onloadイベントやクッキーを処理するためのイベントをONUNLOAD。

<body onload ="checkCookies()">

»をお試しください


onchangeイベント

onchangeイベントは、多くの場合、入力フィールドを検証するために使用されます。

次の例は、のonchange使用する方法を示しています。 ユーザは、入力フィールドの内容を変更したときに大文字()関数と呼ばれます。

<input type="text" id="fname" onchange ="upperCase()">

»をお試しください


onmouseoverイベントれるonmouseout

onmouseoverイベントONMOUSEOUTマウスポインタに、または要素の外に移動したときに機能をトリガーするために使用することができます。

シンプルなのonmouseover-れるonmouseoutインスタンス:

Mouse Over Me

»をお試しください


れるonmousedown、onMouseUpのとonclickのイベント

れるonmousedown、onMouseUpのonclickのイベントは、マウスクリックや全体のプロセスです。 マウスボタンがクリックされたときにまず、イベントをれるonmousedownトリガー、マウスボタンが離されたときに、それがイベントをonMouseUpの引き金となり、最終的には、マウスを[完了]をクリックしたときに、onclickのイベントがトリガされます。

シンプルれるonmousedown-onMouseUpのインスタンス:

Click Me

»をお試しください


HTML DOMイベントオブジェクトのリファレンス

各イベントの詳細と例については、私たちをご覧くださいHTMLのDOMのリファレンスマニュアルを