JavaScript HTML DOM 事件
JavaScript?HTML DOM 事件
HTML DOM 使 JavaScript 有能力對(duì) HTML 事件做出反應(yīng)。
對(duì)事件做出反應(yīng)
我們可以在事件發(fā)生時(shí)執(zhí)行 JavaScript，比如當(dāng)用戶在 HTML 元素上點(diǎn)擊時(shí)。
如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)向一個(gè) HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：
當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)當(dāng)網(wǎng)頁(yè)已加載時(shí)當(dāng)圖像已加載時(shí)當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)當(dāng)輸入字段被改變時(shí)當(dāng)提交 HTML 表單時(shí)當(dāng)用戶觸發(fā)按鍵時(shí)
在本例中，當(dāng)用戶點(diǎn)擊時(shí)，會(huì)改變 <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!'">點(diǎn)我點(diǎn)我點(diǎn)我!</h1> </body> </html>
在本例中，會(huì)從事件處理程序中調(diào)用函數(shù)：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">請(qǐng)點(diǎn)擊這段文本！</h1>
</body>
</html>HTML 事件屬性
如需向 HTML 元素分配事件，您可以使用事件屬性。
向 button 元素分配一個(gè) onclick 事件：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>點(diǎn)擊按鈕來(lái)執(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>在上面的例子中，當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)執(zhí)行名為 displayDate 的函數(shù)。
使用 HTML DOM 來(lái)分配事件
HTML DOM 允許您使用 JavaScript 向 HTML 元素分配事件：
為 button 元素分配 onclick 事件：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>點(diǎn)擊按鈕來(lái)執(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 元素。
當(dāng)按鈕被點(diǎn)擊時(shí)，將執(zhí)行函數(shù)。
onload 和 onunload 事件
當(dāng)用戶進(jìn)入或離開頁(yè)面時(shí)，會(huì)觸發(fā) onload 和 onunload 事件。
onload 事件可用于檢查訪客的瀏覽器類型和版本，以便基于這些信息來(lái)加載不同版本的網(wǎng)頁(yè)。
onload 和 onunload 事件可用于處理 cookies。
<!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>彈出的提示框會(huì)告訴你瀏覽器是否已啟用 cookie。</p>
</body>
</html>onchange 事件
onchange 事件常用于輸入字段的驗(yàn)證。
下面的例子展示了如何使用 onchange。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，將調(diào)用 upperCase() 函數(shù)。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
請(qǐng)輸入你的英文名：<input type="text" id="fname" onchange="myFunction()">
<p>當(dāng)你離開輸入框時(shí)，被觸發(fā)的函數(shù)會(huì)把你輸入的文本轉(zhuǎn)換為大寫字母。</p>
</body>
</html>onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠標(biāo)指針移動(dòng)到或離開元素時(shí)觸發(fā)函數(shù)。
一個(gè)簡(jiǎn)單的 onmouseover-onmouseout 例子：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
Mouse Over Me
</div>
<script>
function mOver(obj)
{
obj.innerHTML="謝謝你"
}
function mOut(obj)
{
obj.innerHTML="把鼠標(biāo)指針移動(dòng)到上面"
}
</script>
</body>
</html>onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠標(biāo)點(diǎn)擊的全部過(guò)程。首先當(dāng)某個(gè)鼠標(biāo)按鈕被點(diǎn)擊時(shí)，觸發(fā) onmousedown 事件，然后，當(dāng)鼠標(biāo)按鈕被松開時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)鼠標(biāo)點(diǎn)擊完成時(shí)，觸發(fā) onclick 事件。
一個(gè)簡(jiǎn)單的 onmousedown-onmouseup 實(shí)例：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
點(diǎn)擊這里
</div>
<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松開鼠標(biāo)"
}
function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="謝謝你"
}
</script>
</body>
</html>
