JavaScript HTML DOM イベント

HTML DOMはJavaScriptがHTMLイベントに反応できるようにします：

マウスが上に来ました！
クリックして

イベントに反応する

JavaScriptはイベントが発生したときに実行できます。例えば、ユーザーがHTML要素をクリックしたときです。

ユーザーが要素をクリックしたときにコードを実行するために、HTMLイベント属性にJavaScriptコードを追加してください：

onclick=JavaScript

HTMLイベントの例：

  • ユーザーがマウスをクリックしたとき
  • ウェブページが読み込まれたとき
  • 画像が読み込まれたとき
  • マウスが要素に移動したとき
  • 入力フィールドが変更されたとき
  • HTML フォームが送信されたとき
  • ユーザーがキーボードを押したとき

この例では、ユーザーが <h1> 時、その内容が変更されます：

例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">このテキストをクリック！</h1>
</body>
</html>

自分で試してみましょう

この例では、イベントハンドラから関数を呼び出します：

例

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">このテキストをクリック！</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

自分で試してみましょう

HTML イベント属性

HTML要素にイベントを割り当てるには、イベント属性を使用できます。

例

button 要素に割り当てる onclick イベント：

<button onclick="displayDate()">試してみる</button>

自分で試してみましょう

上の例では、displayDate と名付けられた関数がボタンがクリックされたときに実行されます。

HTML DOMを使用してイベントを割り当てる

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

例

button 要素に指定 onclick イベント：

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

自分で試してみましょう

上の例では、displayDate と名付けられた関数が id="myBtn" の HTML 要素に割り当てられています。

ボタンをクリックすると、関数が実行されます。

onload および onunload イベントがトリガーされます。

ユーザーがページに入るときおよび退出するとき、 onload および onunload イベント。

onload イベントは、訪問者のブラウザの種類とバージョンを検出し、その情報に基づいて適切なウェブページバージョンをロードするために使用できます。

onload および onunload イベントは、cookieを処理するために使用できます。

例

<body onload="checkCookies()">

自分で試してみましょう

onchange イベント

onchange イベントは、入力フィールドのバリデーションとよく組み合わせて使用されます。

以下は、イベントを使用する方法の例です。 onchange の例。ユーザーが入力フィールドの内容を変更したとき、upperCase() 関数が呼び出されます。

例

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

自分で試してみましょう

onmouseover および onmouseout イベント

onmouseover および onmouseout イベントは、ユーザーが HTML 要素にマウスを移動させたり、移動させるときに特定の関数をトリガーするために使用できます：

マウスが上に来ました！

自分で試してみましょう

onmousedown、onmouseup および onclick イベント

onmousedown, onmouseup および onclick イベントは完全なマウスクリックイベントを構成します。

まず、マウスボタンがクリックされたときに、onmousedown イベントがトリガーされました；そして、マウスボタンが解放されたときに、onmouseup イベントがトリガーされました；最後に、マウスクリックが完了するときに、onclick イベントがトリガーされました。

クリックして

自分で試してみましょう

さらに多くの例

onmousedown と onmouseup
ユーザーがマウスボタンを押したときに画像を変更します。
onload
ページが完全に読み込まれたときにアラートボックスを表示します。
onfocus
入力フィールドにフォーカスが当たったときに背景色を変更します。
マウスイベント
要素に指が移動したときに色を変更します。

HTML DOM イベントオブジェクトリファレンスマニュアル

すべての HTML DOM イベントのリストについては、私たちの完全な HTML DOM イベントオブジェクトリファレンスマニュアル。