事件
爲什麼要使用事件?
平時我們都會遇到各種來自用戶操作的事件，比如鼠標事件、表單事件、進度事件、突變事件（DOM節點改變）等等。我認爲事件的提出就是爲了規範這類行爲的。
假如我們要實現這個功能：點擊超鏈接，彈出兩個彈框。於是有下面的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript">
function click1(){
alert("You Click?");
return false;
}
function click2(){
alert("Are you sure?");
return false;
}
</script>
</head>
<body>
<a href="test.html" id="linka">Click Me</a>
<script type="text/javascript">
document.getElementById("linka").onclick=click1;
document.getElementById("linka").onclick=click2;
</script>
</body>
</html>
但是我們會發現一個問題——只能彈出第二個彈窗.....
所以爲了避免觸發交互事件的諸多bug，最好的方式就是使用人家已經規定好的規範，走野路子bug多....調試調到心態爆炸。所以我們可以嘗試使用事務做這個效果。
例題
點擊超鏈接，彈出兩個彈框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件</title>
<script type="text/javascript">
function click1(){
alert("You Click?");
return false;
}
function click2(){
alert("Are you sure?");
//標準事件模型——阻止默認操作。不改的話就會默認不跳。
e.preventDefault();
}
</script>
</head>
<body>
<a href="test.html" id="linka">Click Me</a>
<script type="text/javascript">
//添加事件監聽器
var linka=document.getElementById("linka");
linka.addEventListener("click",click1); //（沒有On的事件名，函數名）
linka.addEventListener("click",click2);
</script>
</body>
</html>
應用案例
用戶註冊時，如果用戶名爲空則提示用戶並強制用戶寫用戶名。
提交時需要判斷以下所有成立：判斷密碼不爲空，判斷密碼長度8-20，兩次密碼一致。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用戶名輸入失去焦點時提示</title>
</head>
<body>
<!--div表示自成一行，所以用span提醒更好。from現在不推薦用了，一般用css -->
姓名：<input id="uname"><span id="prompt1"></span><br>
密碼:<input id="ps1" type="password"><br>
確認密碼:<input id="ps2" type="password"><br>
<input type="submit" onclick="checkPsw()" value="Register">
<script type="text/javascript">
function checkName(){
if(uname.value==""){
//alert("用戶名不可爲空"); 死循環提示，缺點是一直失去焦點。但是IE內核版本低的不會一直失去焦點。
document.getElementById("prompt1") //提示用戶
.innerHTML="<font color='red'>用戶名不能爲空</font>";
uname.focus(); //強制獲取焦點
}
}
function checkPsw(){
var le=psw.value.length;
if(psw.value==""||le<8||le>20){
alert("請正確填寫密碼！長度爲8~20！");
psw.focus();
}else if((psw2.value)!=(psw.value)){
alert("兩次密碼要一致");
psw.focus();
}
}
var uname=document.getElementById("uname");
uname.addEventListener("blur",checkName); //onblur()焦點事件
var psw=document.getElementById("ps1");
var psw2=document.getElementById("ps2");
</script>
</body>
</html>