JavaScript HTML DOM イベント
JavaScript HTML DOM イベント
HTML DOM は、JavaScript に HTML イベントに反応する機能を提供します。
イベントに反応する
ユーザーが HTML 要素をクリックしたときなど、イベントが発生したときに JavaScript を?qū)g行できます。
ユーザーが要素をクリックしたときにコードを?qū)g行するには、HTML イベント屬性に JavaScript コードを追加します:
onclick=JavaScript
HTML イベントの例:
ユーザーがマウスをクリックしたとき ページが読み込まれたとき 畫像が読み込まれたときロードされたとき マウスが要素上に移動したとき 入力フィールドが変更されたとき HTML フォームが送信されたとき ユーザーがキー押下をトリガーしたとき
この場合、ユーザーがクリックすると、<h1> の內(nèi)容が変更されます。要素:
<!doctype html> <html> <meta charset="utf-8"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> <h1 onclick="this.innerHTML='hello!'">點我點我點我!</h1> </body> </html>
この場合、関數(shù)はイベント ハンドラーから呼び出されます:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">請點擊這段文本！</h1>
</body>
</html>HTML イベント屬性
HTML 要素にイベントを割り當てるには、event 屬性を使用できます。
onclick イベントをボタン要素に割り當てます:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>點擊按鈕來執(zhí)行 <b>displayDate()</b> 函數(shù)。</p>
<button onclick="displayDate()">試一試</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>上の例では、ボタンがクリックされると、displayDate という名前の関數(shù)が実行されます。
HTML DOM を使用してイベントを割り當てる
HTML DOM を使用すると、JavaScript を使用して HTML 要素にイベントを割り當てることができます:
onclick イベントをボタン要素に割り當てます:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>點擊按鈕來執(zhí)行 <b>displayDate()</b> 函數(shù)。</p>
<button id="myBtn">試一試</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>上記の例では、displayDate という名前の関數(shù)が id =myButn に割り當てられています" HTML 要素。
ボタンがクリックされると、関數(shù)が実行されます。
onloadイベントとonunloadイベント
onloadイベントとonunloadイベントは、ユーザーがページに出入りするときにトリガーされます。
onloadイベントは次の目的で使用できます。この情報に基づいて、訪問者のブラウザの種類とバージョンを確認し、
onload イベントを使用して Cookie を処理できます。
onchange イベントは、入力フィールドの検証によく使用されます。
次の例は、ユーザーが入力フィールドの內(nèi)容を変更すると、upperCase() 関數(shù)が呼び出されます。onmouseout イベントを使用して関數(shù)をトリガーできます。マウス ポインターが要素に移動したり、要素から離れたりします。単純な onmouseover-onmouseout の例:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body onload="checkCookies()">
<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookies are enabled")
}
else
{
alert("Cookies are not enabled")
}
}
</script>
<p>彈出的提示框會告訴你瀏覽器是否已啟用 cookie。</p>
</body>
</html>onmousedown、onmouseup、および onclick イベント
Onmousedown、onmouseup、onclick イベントは、マウス クリックのプロセス全體です。まず、マウス ボタンがクリックされると、onmousedown イベントがトリガーされ、次にマウス ボタンが放されると、onmouseup イベントがトリガーされます。最後に、マウスのクリックが完了すると、onclick イベントがトリガーされます。
単純な onmousedown-onmouseup の例:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
請輸入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框時，被觸發(fā)的函數(shù)會把你輸入的文本轉(zhuǎn)換為大寫字母。</p>
</body>
</html>
