HTML DOM - イベント

HTML DOM を使用すると、JavaScript は HTML イベントに反応できます。

例

Mouse Over Me

Click Me

イベントに反応する

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

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

onclick=JavaScript

HTML イベントの例：

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

この例では、ユーザーがクリックすると <h1> 要素の内容が変更されます：

例

<h1 onclick="this.innerHTML='Ooops!'">テキストをクリック！</h1>

試してみる »

この例では、イベントハンドラーから関数が呼び出されます：

例

試してみる »

HTML イベント属性

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

例

button 要素に onclick イベントを割り当てます：

<button onclick="displayDate()">クリックして</button>

試してみる »

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

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

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

例

button 要素に onclick イベントを割り当てます：

document.getElementById("myBtn").onclick=function(){displayDate()};

試してみる »

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

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

onload および onunload イベント

ユーザーがページに出入りすると、onload および onunload イベントがトリガーされます。

onload イベントを使用すると、訪問者のブラウザの種類とバージョンを確認し、その情報に基づいてさまざまなバージョンのウェブページを読み込むことができます。

onload および onunload イベントは、Cookie の処理に使用できます。

例

試してみる »

onchange イベント

onchange イベントは、入力フィールドの検証によく使用されます。

次の例は、onchange の使用方法を示しています。ユーザーが入力フィールドの内容を変更すると、upperCase() 関数が呼び出されます。

例

試してみる »

onmouseover および onmouseout イベント

onmouseover および onmouseout イベントを使用すると、マウスポインターが要素の上に移動したとき、または要素から離れたときに関数をトリガーできます。

例

シンプルな onmouseover-onmouseout の例：

Mouse Over Me

試してみる »

onmousedown、onmouseup および onclick イベント

onmousedown、onmouseup、onclick イベントは、マウスクリックの一連のプロセスです。まず、マウスボタンがクリックされると onmousedown イベントがトリガーされ、次にマウスボタンが離されると onmouseup イベントがトリガーされ、最後にマウスクリックが完了すると onclick イベントがトリガーされます。

例

シンプルな onmousedown-onmouseup の例：

Click Me

試してみる »