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 事件的範(fàn)例：
當(dāng)使用者點(diǎn)擊滑鼠時(shí)當(dāng)網(wǎng)頁已載入時(shí)當(dāng)圖像已載入時(shí)當(dāng)滑鼠移動(dòng)到元素上時(shí)當(dāng)輸入欄位被改變時(shí)當(dāng)提交HTML 表單時(shí)當(dāng)使用者觸發(fā)按鍵時(shí)
在本範(fàn)例中，當(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ì)從事件處理程序中呼叫函數(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)擊按鈕來執(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>在上面的範(fàn)例中，當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)執(zhí)行名為 displayDate 的函數(shù)。
使用HTML DOM 來指派事件
HTML DOM 允許您使用JavaScript 為HTML 元素指派事件：
為button 元素指派onclick 事件：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<p>點(diǎn)擊按鈕來執(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)入或離開頁面時(shí)，會(huì)觸發(fā)onload 和onunload 事件。
onload 事件可用於檢查訪客的瀏覽器類型和版本，以便基於這些資訊來載入不同版本的網(wǎng)頁。
onload 和onunload 事件可用於處理cookies。如何使用onchange。元素時(shí)觸發(fā)函數(shù)。
onmousedown、onmouseup 以及 onclick 事件就是滑鼠點(diǎn)擊的整個(gè)過程。首先當(dāng)某個(gè)滑鼠按鈕被點(diǎn)擊時(shí)，觸發(fā) onmousedown 事件，然後，當(dāng)滑鼠按鈕被放開時(shí)，會(huì)觸發(fā) onmouseup 事件，最後，當(dāng)滑鼠點(diǎn)擊完成時(shí)，觸發(fā) onclick 事件。
一個(gè)簡(jiǎn)單的 onmousedown-onmouseup 實(shí)例：
<!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>
