ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript HTML DOM イベントに関する知識

JavaScript HTML DOM イベントに関する知識

jackloveオリジナル: 2018-05-07 11:10:111151ブラウズ

JavaScript HTML DOM イベントは、js で重要な役割を果たします。この記事では、その関連知識について詳しく説明します。

イベントに反応する

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

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

onclick=JavaScript

HTML イベントの例:

ユーザーがマウスをクリックしたとき

ページが読み込まれたとき

画像が読み込まれたとき

マウスが要素上に移動したとき

入力フィールドが変更されたとき

HTMLフォームが送信されたとき

ユーザーがキープレスをトリガーしたとき

この場合、ユーザーが1179f652af8537777d18befc1b0d4a32 要素をクリックすると、その内容が変更されます:

Instance

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML=&#39;Ooops!&#39;">点击文本!</h1>
</body>
</html>

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

Instance

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

HTML イベント属性

イベントを HTML 要素に割り当てるには、イベントプロパティを使用できます。

onclick イベントをボタン要素に割り当てます。

<button onclick="displayDate()">点这里</button>

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

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

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

onclick イベントをボタン要素に割り当てます:

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

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

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

onload イベントと onunload イベント

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

onload イベントを使用すると、訪問者のブラウザの種類とブラウザのバージョンを検出し、この情報に基づいて Web ページの正しいバージョンをロードできます。

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 イベントが発生します。

この記事では、DOM イベントの関連知識についてある程度理解しています。その他の学習資料については、php 中国語 Web サイトを参照してください。

JavaScript HTML DOM イベントに関する知識

関連記事