在JavaScript語言中可以處理的事件類型可以分為：鼠標事件，鍵盤事件和HTML事件。對于于每一個事件，它都有自己的觸發(fā)范圍和方式铲汪，如果超出了觸發(fā)范圍和方式，事件處理就會失效摩桶。所有的事件處理函數(shù)都會有兩個部分組成桥状，on+事件名稱帽揪，例如click事件的時間處理函數(shù)就是：onclick硝清。
JavaScript事件處理函數(shù)及其使用列表
鼠標事件：頁面所有元素都可觸發(fā)
(1)click：當用戶單擊鼠標按鈕或按下回車鍵時觸發(fā)。onclick事件是我們最常用的鼠標事件转晰，幾乎涵蓋了網(wǎng)頁中的很多與用戶交互的過程芦拿。我們只是看一個簡單的實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
#test {
background-color:yellow;
width:200px;
height:50px;
padding-top:25px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("test");
div.onclick=function(){
this.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="test">Click Me</div>
</body>
</html>
點擊之前(初始化狀態(tài))：
點擊之后(也是以后一直保持的狀態(tài))：
(2)dblclick：當用戶雙擊主鼠標按鈕時觸發(fā)士飒。這個鼠標事件一般很少用到，我們就不再舉例了蔗崎。
(3)mousedown：當用戶按下了鼠標還未彈起時觸發(fā)酵幕。
(4)mouseup：當用戶釋放鼠標按鈕時觸發(fā)。
onmousedown缓苛、onmouseup 以及onclick事件是鼠標點擊的全部過程芳撒。首先當某個鼠標按鈕被點擊時，觸發(fā)onmousedown事件未桥，然后笔刹，當鼠標按鈕被松開時，會觸發(fā)onmouseup事件冬耿，最后舌菜，當鼠標點擊完成時，觸發(fā)onclick事件亦镶。我們來看一個簡單的實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
#test {
background-color:yellow;
width:200px;
height:50px;
padding-top:25px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("test");
div.onmousedown=function(){
this.style.backgroundColor="blue";
this.innerHTML="松開鼠標";
}
div.onmouseup=function(){
this.style.backgroundColor="yellow";
this.innerHTML="謝謝";
}
}
</script>
</head>
<body>
<div id="test">Click Me</div>
</body>
</html>
鼠標未點擊之前(初始化狀態(tài))：
鼠標點下去不松開：
鼠標松開(最后保持的狀態(tài)日月，再次刷新后為初始化狀態(tài))：
(5)mouseover：當鼠標移到某個元素上方時觸發(fā)。
(6)mouseout：當鼠標移出某個元素上方時觸發(fā)缤骨。
這兩個事件一般同時使用爱咬，也是經(jīng)常做Web前端開發(fā)用到的。比如導航欄的下拉菜單等各種動態(tài)效果绊起。我們來看一個簡單的實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
#test {
background-color:#FFFF00;
width:200px;
height:50px;
padding-top:25px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var div=document.getElementById("test");
div.onmouseover=function(){
this.innerHTML="謝謝";
}
div.onmouseout=function(){
this.innerHTML="把鼠標移上來";
}
}
</script>
</head>
<body>
<div id="test">Mouse Over Me</div>
</body>
</html>
鼠標放上去之前(初始化狀態(tài))：
鼠標放上去之后：
鼠標放下去之后(最后保持的狀態(tài)台颠，再次刷新后為初始化狀態(tài))：
(7)mousemove：當鼠標指針在元素上移動時觸發(fā)。這個好演示勒庄，只是沒有什么多大的變化串前，我們等到實際用到了在進行詳細的演示和了解。
鍵盤事件
keydown：當用戶按下鍵盤上任意鍵時觸發(fā)实蔽，如果按住不放荡碾，會重復觸發(fā)。
keypress：當用戶按下鍵盤上的字符鍵時觸發(fā)局装，如果按住不放坛吁，會重復觸發(fā)。
keyup：當用戶釋放鍵盤上的鍵時觸發(fā)
由于瀏覽器兼容性的問題铐尚，在這里就不再舉例拨脉。詳細了解的話可以參考：http://www.jb51.net/article/21592.htm
HTML事件
(1)load：當頁面完全加載后在window上面觸發(fā)，或當框架集加載完畢后在框架集上觸發(fā)宣增。
(2)unload：當頁面完全卸載后在window上面觸發(fā)玫膀，或當框架集卸載完畢后在框架集上觸發(fā)。
當用戶進入或離開頁面時爹脾，會觸發(fā)onload和onunload事件帖旨。onload事件可用于檢查訪客的瀏覽器類型和版本箕昭，以便基于這些信息來加載不同版本的網(wǎng)頁。onload和onunload事件可用于處理 cookies解阅。onload事件我們在前面已經(jīng)使用過落竹，就不再進行舉例。
3)select：當用戶選擇文本框(input或textarea)中的一個或多個字符時觸發(fā)货抄。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.onload=function(){
var userName=document.getElementById("userName");
userName.onselect=function(){
alert("你選中了"+this.value);
}
}
</script>
</head>
<body>
請輸入你的英文名：<input type="text" id="userName" />
<p>當輸入字段并選中字符時發(fā)生的事件述召。</p>
</body>
</html>
效果：
(4)change：當文本框(input或textarea)內(nèi)容改變且失去焦點后觸發(fā)。我們舉行一個簡單的實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.onload=function(){
var userName=document.getElementById("userName");
userName.onchange=function(){
this.value=this.value.toUpperCase();
}
}
</script>
</head>
<body>
請輸入你的英文名：<input type="text" id="userName" />
<p>當你離開輸入框時蟹地，被觸發(fā)的函數(shù)會把你輸入的文本轉換為大寫字母桨武。</p>
</body>
</html>
未失去焦點之前：
失去焦點之后：
(5)focus：當頁面或者元素獲得焦點時window及相關元素上觸發(fā)。
(6)blur：當頁面或者元素失去焦點時window及相關元素上觸發(fā)锈津。
對于上述的兩個事件也是在一起使用的事件呀酸，我們看一個簡單的實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.onload=function(){
var userName=document.getElementById("userName");
userName.onfocus=function(){
this.style.backgroundColor="yellow";
}
userName.onblur=function(){
this.style.backgroundColor="red";
}
}
</script>
</head>
<body>
請輸入你的英文名：<input type="text" id="userName" />
<p>當輸入字段獲得焦點時，會觸發(fā)改變背景顏色的函數(shù)琼梆。</p>
</body>
</html>
初始化狀態(tài)：
獲取焦點之后：
失去焦點之后：
(7)submit：當用戶點擊提交按鈕在<form>元素上觸發(fā)性誉。
(8)reset：當用戶點擊重置按鈕在<form>元素上觸發(fā)。這兩個事件我們一般在提交表單使用茎杂，單獨拿出來以后演示沒有任何的效果错览，我們就不再演示。在后面相關的提交表單的博文中我們詳細介紹煌往。
(9)resize：當窗口或框架的大小變化時在window或框架上觸發(fā)倾哺。
(10)scroll：當用戶滾動帶滾動條的元素時觸發(fā)。以上兩個事件使用很少刽脖，就不再舉例演示羞海。
文章轉載于：http://blog.csdn.net/erlian1992/article/details/50425875
