JavaScript HTML DOM 事件
事件
#事件是使用者或?yàn)g覽器本身執(zhí)行的某種動作，如click, load和mouseover都是事件的名字。
事件是javaScript和DOM之間的橋樑。
你若觸發(fā)，我便執(zhí)行－事件發(fā)生，呼叫它的處理函數(shù)執(zhí)行對應(yīng)的JavaScript程式碼給予回應(yīng)。
典型的例子有：頁面載入完畢觸發(fā)load事件；使用者點(diǎn)擊元素，觸發(fā)click事件。
對事件做出反應(yīng)
我們可以在事件發(fā)生時(shí)執(zhí)行 JavaScript，例如當(dāng)使用者在 HTML 元素上點(diǎn)擊時(shí)。
如需在使用者點(diǎn)選某個(gè)元素時(shí)執(zhí)行程式碼，請為一個(gè)HTML 事件屬性新增JavaScript 程式碼：
onclick=JavaScript
HTML事件的範(fàn)例：
當(dāng)使用者點(diǎn)擊滑鼠時(shí)
當(dāng)網(wǎng)頁已載入時(shí)
當(dāng)圖像已載入時(shí)
當(dāng)滑鼠移到元素上時(shí)
當(dāng)輸入欄位被改變時(shí)
當(dāng)提交HTML 表單時(shí)
當(dāng)使用者觸發(fā)按鍵時(shí)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="hello";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊！</h1>
</body>
</html>如需向HTML 元素指派事件，您可以使用事件屬性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<button onclick="displayDate()">點(diǎn)擊</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>HTML DOM 允許您使用JavaScript 來為HTML 元素指派事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<head>
</head>
<body>
<button id="myBtn">點(diǎn)這里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>onload 和onunload 事件
onload 和onunload 事件會在使用者進(jìn)入或離開頁面時(shí)觸發(fā)。
onload 事件可用於偵測訪客的瀏覽器類型和瀏覽器版本，並基於這些資訊來載入網(wǎng)頁的正確版本。
onload 和 onunload 事件可用來處理 cookie。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function load(){
alert("頁面加載完成");
}
</script>
</head>
<body onload="load()">
</body>
</html>onchange 事件
onchange 事件常常結(jié)合對輸入欄位的驗(yàn)證來使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<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>當(dāng)你離開輸入框后，將小寫字母轉(zhuǎn)為大寫字母。</p>
</body>
</html>onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用於在使用者的滑鼠移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:yellow;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="鼠標(biāo)請移動至此"
}
</script>
</body>
</html>onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了滑鼠點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊滑鼠按鈕時(shí)，會觸發(fā) onmousedown 事件，當(dāng)釋放滑鼠按鈕時(shí)，會觸發(fā) onmouseup 事件，最後，當(dāng)完成滑鼠點(diǎn)擊時(shí)，會觸發(fā) onclick 事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script type="text/javascript">
function noNumbers(e)
{
var keynum;
var keychar;
keynum = window.event ? e.keyCode : e.which;
keychar = String.fromCharCode(keynum);
alert(keynum+':'+keychar);
}
</script>
</head>
<body>
<input type="text" onkeydown="return noNumbers(event)" />
</body>
</html>其他事件：
onmousedown 和onmouseup
當(dāng)使用者按下滑鼠按鈕時(shí)，更換一個(gè)圖片。
onload
當(dāng)頁面完成載入時(shí)，顯示一個(gè)提示框。
onfocus
當(dāng)輸入欄位獲得焦點(diǎn)時(shí)，改變其背景色。
滑鼠事件
當(dāng)指標(biāo)移動到元素上方時(shí)，改變其顏色；當(dāng)指標(biāo)移出文字後，會再次改變其顏色。
