JavaScript事件處理

---

一、事件與事件處理概述

最近學JavaScript，學到了這裏發現事件處理其實和asp.net中的控件意思差不多。

目錄即爲JavaScript事件處理的知識框架。

事件處理的過程分爲三步：

• 發生事件
• 啓動事件處理程序
• 事件處理程序做出反應

什麼是事件？ 事件是指一些可以通過腳本響應的頁面動作。當用戶按下鼠標或者提交一個表單等等時候，事件都會出現。事件處理是一段JavaScript代碼，總是與頁面中的特定部分以及一定的事件相關聯。當與頁面特定部分相關聯的事件發生時，事件處理器就會被調用。

（一）JavaScript常用事件

下表總結了一些JavaScript常用事件

（二）事件的調用

1、在HTML中調用

在HTML中分配事件處理程序，只需要在HTML標記中添加相應的事件，並在其中指定要執行的代碼或時函數名即可。例如：

<input name="save" type="button" value="保存" onclick="alert('單擊了保存按鈕');">

2、在JavaScript中調用

在JavaScript中調用事件處理程序，首先需要獲取要處理對象的引用，然後將要執行的處理函數賦值給對應的事件。例如，單擊保存按鈕彈出對話框：

<input id="save" name="save" type="button" value="保存">
<script type="text/javascript">
    var b_save=document.getElementById("save"); //獲取id屬性值爲save的元素
    b_save.onclick=function () {
        alert("單擊了保存按鈕！");
    }
</script>

或者：

<form id="form1" name="form1" method="post" action="">
    <input id="save" name="save" type="button" value="保存">
</form>
<script type="text/javascript">
    form1.save.onclick=function () {
        alert("單擊了保存事件！");
    }
</script>

效果如下：

（三）事件對象

在IE瀏覽器中事件對象是Window對象的一個屬性event，並且event對象只能在事件發生時被訪問，當所有事件處理完後，該對象就自動消失了。爲了處理兼容性，通常這樣寫：

    function someHandle(event) {
        //處理兼容性，獲取事件對象
        if(window.event)
            event=window.event;
    }

在IE瀏覽器中，發生事件的元素通過event對象的srcElemet屬性獲取，而在標準的DOM瀏覽器中，發生事件的元素通過event對象的target屬性獲取。爲了處理兩種瀏覽器兼容性，舉例代碼如下:

<form id="form1" name="form1" method="post" action="">
    <input id="save" name="save" value="保存" type="button">
</form>
<script type="text/javascript">
    function handle(oEvent) {
        if(window.event) oEvent=event;
        var oTarget;
        if(oEvent.srcElement)
            oTarget=oEvent.srcElement;
        else
            oTarget=oEvent.target;
        alert(oTarget.tagName);     //彈出發生事件的元素標記名稱
    }
    form1.save.onclick=handle;      //爲按鈕綁定單擊事件
</script>

---

二、表單相關事件

實際上就是對元素獲得或失去焦點的動作進行控制。可以利用表單事件來改變獲得或失去焦點的元素樣式。

（一）獲得焦點與失去焦點事件

獲得焦點事件（onfocus）是當某個元素獲得焦點時觸發事件處理程序。失去焦點事件（onblur）是當前元素失去焦點時觸發事件處理程序。在一般情況下，這兩個事件同時使用。

通過一個例子，來說明他是怎麼用的，效果如下圖所示。用戶選中文本框時，改變選中文本框的背景顏色，當選擇其他文本框時將失去焦點的文本框恢復爲原來的顏色。

直接上代碼：

<table align="center" width="300" height="160" border="1">
    <form name="form1">
        <tr>
            <td width="80" align="right">用戶名：</td>
            <td width="200">
                <input type="text" onfocus="txtfocus()" onblur="txtblur()">
            </td>
        </tr>
		<!-- 篇幅所限，此處省略其他元素，和上面一樣 -->
    </form>
</table>
<script type="text/javascript">
    function txtfocus() {
        var e=window.event;     //獲取事件對象
        var obj=e.srcElement;   //獲取事件發生的元素
        obj.style.background="#ff9966";
    }
    function txtblur() {
        var e=window.event;
        var obj=e.srcElement;
        obj.style.background="#FFFFFF";
    }
</script>

（二）失去焦點內容改變事件

失去焦點內容改變事件（onchange）是指當前元素失去焦點，並且元素的內容發生改變時觸發事件處理程序。該事件一般再下拉菜單中使用。

例子：改變文本框中的字體顏色

<form name="form1">
    <input name="textfield" type="text" size="18" value="Hello JavaScript">
    <select name="menu1" onchange="Fcolor()">
        <option value="black">黑色</option>
        <option value="red">紅色</option>
        <option value="green">綠色</option>
    </select>
</form>
<script type="text/javascript">
    function Fcolor() {
        var e=window.event;
        var obj=e.srcElement;
        form1.textfield.style.color=obj.value;
    }
</script>

效果如下：

（三）表單提交與重置事件

• 表單提交事件（onsubmit）是在用戶提交表單時，在表單提交之前被觸發（提交表單通常使用“提交”按鈕，也就是將按鈕的type屬性設置爲submit），因此，該事件的處理程序通過返回false值來阻止表單的提交。該事件可以用來驗證表單輸入項的正確性
• 表單重置事件（onreset）與表單提交事件的處理過程相同，該事件只是將表單中的各元素的值設置爲原始值。一般用於清空表單中的文本框。

下面給出的這兩個事件的使用格式：

<form name="formname" onsubmit="return Funname" onreset="return Funname"></form>

如果onsubmit和onreset事件中調用的是自定義函數名，那麼，必須在函數名的前面加return 語句，否則，不論在函數中返回的是真還是假，當前事件所返回都是true值

例子：驗證提交的表單中是否有空值，通過onsubmit事件來判斷提交的表單是否有空文本框，如果有空文本，則返回false，代碼如下：

<form name="form1" onsubmit="return AllSubmit()">
	<!-- 省略部分HTML代碼 -->
	<input name="sub" type="submit" id="sub2" value="提交">
	<input type="reset" name="Submit2" value="重置">
</form>
<script type="text/javascript">
    function AllSubmit() {
        var T = true;
        var e = window.event;
        var obj = e.srcElement;
        for(var i = 1 ; i <= 7 ; i ++ )
            if(eval("obj."+"txt"+i).value==""){
                T=false;
                break;
            }
        if(!T) alert("提交信息不允許爲空");
        return T;
    }
</script>

效果如下：

---

三、鼠標和鍵盤事件

（一）鼠標單擊事件

單擊事件（onclick）是指在鼠標單擊時被觸發的事件。單擊事件一般應用於Button對象、Checkbox對象、Link對象、Radio對象、Reset對象和Submit對象。

例子：動態改變頁面的背景顏色，代碼如下：

<form name="form1" method="post" action="">
    <p><input type="button" id="Submit" name="Submit" value="變換背景"></p>
    <p>用按鈕隨意變換背景顏色</p>
</form>
<script type="text/javascript">
    var Arraycolor=new Array("olive","teal","red","blue","maroon","navy",
        "lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
    var n = 0;
    form1.Submit.onclick=function() {
        if(n==(Arraycolor.length-1)) n = 0;
        n++;
        document.bgColor=Arraycolor[n];
    }
</script>

效果如下：

（二）鼠標按下和鬆開事件

鼠標的按下和鬆開事件分別是onmousedown和onmouseup事件。其中，onmousedown事件用於在鼠標按下時觸發事件處理程序，onmouseup事件則是在鼠標鬆開時觸發事件處理程序。

例子：用事件模擬超鏈接標記的功能，當按下鼠標時，字體改變顏色，當鬆開鼠標時則回到原來的顏色，代碼如下：

<p id="p1" style="color: #AA9900;cursor: pointer" onmousedown="mousedown()"
   onmouseup="mouseup()"><u>Hello little pang！</u></p>
<script type="text/javascript">
    function mousedown() {
        var obj = document.getElementById('p1');    //獲取包含文本的元素
        obj.style.color="#0022AA";
    }
    function mouseup(){
        var obj=document.getElementById('p1');
        obj.style.color="#AA9900";
    }
</script>

效果如下：

（三）鼠標移入和移出事件

鼠標的移入移出事件分別是onmouseover和onmouseout事件，其中onmouseover事件時在鼠標移動到對象上方時觸發事件處理程序，onmouseout事件則是在鼠標移出對象上方時觸發事件處理程序。

例子：動態改變圖片焦點，當鼠標移入圖片，圖片的透明度將爲50%，否則100%顯示。代碼如下：

<script type="text/javascript">
function visible(cursor,i) {
    if(i==0)
        cursor.style.opacity=1;   //圖片透明度設置爲100
    else
        cursor.style.opacity=0.5;    //圖片透明度設置爲50
}
</script>
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <img src="images/3.jpg" border="0" style="filter:alpha(opacity=100)" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" width="148" HEIGHT="148">
        </td>
    </tr>
</table>

效果如下：

（四）鼠標移動事件

鼠標移動事件（onmousemove）是指鼠標在頁面上進行移動時觸發事件處理程序，可以在該事件中用Document對象實時讀取鼠標在頁面中的位置。

例子：獲取鼠標指針的座標。代碼如下：

<script type="text/javascript">
    var x=0,y=0;
    function MousePlace() {
        x=window.event.x;
        y=window.event.y;
        //輸出鼠標的當前位置
        document.getElementById('position').innerHTML="鼠標在頁面中的當前位置的橫座標X："+x+",縱座標Y："+y;
    }
    document.onmousemove=MousePlace;
</script>
<span id="position"></span>

效果如下：

（五）鍵盤事件

鍵盤事件包含onkeypress、onkeydown和onkeyup事件：

• onkeypress：指在鍵盤上的某個鍵被按下並且釋放時觸發此事件的處理程序，一般用於鍵盤上的單鍵操作
• onkeydown：指在鍵盤上某個鍵被按下時觸發此事件的處理程序，一般用於組合鍵的操作
• onkeyup：指在鍵盤上的某個鍵被按下後鬆開時觸發此事件的處理程序，一般用於組合鍵的操作

鍵盤上的字母和數據鍵的鍵碼值，請訪問：

http://www.bejson.com/othertools/keycodes/

一般這樣用：

<script type="text/javascript">
function solve(){
	if(window.event.keyCode==某個鍵碼值){
		處理;
	}
	document.onkeydown=solve;
}
</script>

---

四、頁面事件

頁面事件是指在頁面加載或改變瀏覽器大小、位置及對頁面中的滾動條進行操作時，所觸發的事件處理程序。

（一）加載與卸載事件

加載事件onload是指在網頁加載完畢後觸發相應的事件處理程序，它可以在網頁加載完成後對網頁中的表格樣式、字體等等進行設置。

卸載事件onunload是指在卸載網頁時觸發相應的事件處理程序，指刷新、關閉或從當前頁跳轉到其他網頁中。

例子：動態改變圖片大小，代碼如下：

<body onunload="pclose()">
<img src="images/3.jpg" name="img1" onload="blowup()" onmouseout="blowup()" onmouseover="reduce()">
<script type="text/javascript">
    var h=img1.height;
    var w=img1.width;
    //縮小圖片
    function blowup() {
        if(img1.height>=h){
            img1.height=h-100;
            img1.width=w-100;
        }
    }
    function reduce() {
        if(img1.height<h){
            img1.height=h;
            img1.width=w;
        }
    }
    function pclose() {
        alert("歡迎瀏覽本網頁");
    }
</script>
</body>

效果如下：

（二）頁面大小事件

頁面大小事件onresize是指用戶改變瀏覽器的大小時觸發事件處理程序。例如當瀏覽器窗口被調整大小時，將太初一個對話框，代碼如下：

<body onresize="showMsg()">
<script type="text/javascript">
function showMsg(){
	alert("瀏覽器窗口大小被改變！");
}
</script>
</body>

---