JavaScript HTMLDOMイベント
HTML DOMを使用すると、JavaScriptはHTMLイベントに反応できます。
イベントへの対応
JavaScriptは、ユーザーがHTML要素をクリックしたときなど、イベントが発生したときに実行できます。
ユーザーが要素をクリックしたときにコードを実行するには、JavaScriptコードをHTMLイベント属性に追加します。
onclick=JavaScript
HTMLイベントの例:
- ユーザーがマウスをクリックしたとき
- Webページが読み込まれたとき
- 画像が読み込まれたとき
- マウスが要素の上を移動したとき
- 入力フィールドが変更されたとき
- HTMLフォームが送信されたとき
- ユーザーがキーをストロークしたとき
この例では<h1>
、ユーザーが要素をクリックすると、要素のコンテンツが変更されます。
例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
この例では、関数はイベントハンドラーから呼び出されます。
例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
HTMLイベント属性
HTML要素にイベントを割り当てるには、イベント属性を使用できます。
例
onclickイベントをボタン要素に割り当てます。
<button onclick="displayDate()">Try it</button>
displayDate
上記の例では、ボタンがクリックされると、という名前の関数が実行されます。
HTMLDOMを使用してイベントを割り当てる
HTML DOMを使用すると、JavaScriptを使用してイベントをHTML要素に割り当てることができます。
例
onclickイベントをボタン要素に割り当てます。
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
上記の例では、という名前の関数が。displayDate
を使用してHTML要素に割り当てられていますid="myBtn"
。
ボタンをクリックすると機能が実行されます。
onloadおよびonunloadイベント
onload
andイベントはonunload
、ユーザーがページに出入りしたときにトリガーされます。
このonload
イベントを使用して、訪問者のブラウザの種類とブラウザのバージョンを確認し、その情報に基づいて適切なバージョンのWebページをロードできます。
onload
andイベントはonunload
、Cookieを処理するために使用できます。
例
<body onload="checkCookies()">
onchangeイベント
このonchange
イベントは、入力フィールドの検証と組み合わせて使用されることがよくあります。
以下は、onchangeの使用方法の例です。このupperCase()
関数は、ユーザーが入力フィールドの内容を変更したときに呼び出されます。
例
<input type="text" id="fname"
onchange="upperCase()">
onmouseoverおよびonmouseoutイベント
onmouseover
andonmouseout
イベントは、ユーザーがHTML要素の上または外にマウスを置いたときに関数をトリガーするために使用できます。
onmousedown、onmouseup、onclickイベント
、、、およびイベントはすべて、マウスクリックの一部ですonmousedown
。最初にマウスボタンがクリックされるとonmousedownイベントがトリガーされ、次にマウスボタンが離されるとonmouseupイベントがトリガーされ、最後にマウスクリックが完了するとonclickイベントがトリガーされます。onmouseup
onclick
その他の例
ユーザーがマウスボタンを押したときに画像を変更します。
ページの読み込みが完了したときにアラートボックスを表示します。
フォーカスを取得したときに、入力フィールドの背景色を変更します。
カーソルが要素の上に移動したときに要素の色を変更します。
HTMLDOMイベントオブジェクトリファレンス
すべてのHTMLDOMイベントのリストについては、完全なHTMLDOMイベントオブジェクトリファレンスを参照してください。