3.5 事件處理

視頻講解：光盤\TM\lx\3\09事件處理．mp4

通過前面的學習，知道JavaScript可以以事件驅動的方式直接對客戶端的輸入作出響應，無須經過服務器端程序；也就是說，JavaScript是事件驅動的，它可以使在圖形界面環境下的一切操作變得簡單化。下面將對事件及事件處理程序進行詳細介紹。

3.5.1 什么是事件處理程序

JavaScript與Web頁面之間的交互是通過用戶操作瀏覽器頁面時觸發相關事件來實現的。例如，在頁面載入完畢時將觸發onload（載入）事件，當用戶單擊按鈕時將觸發按鈕的onclick事件等。事件處理程序則是用于響應某個事件而執行的處理程序。事件處理程序可以是任意JavaScript語句，但通常使用特定的自定義函數（Function）來對事件進行處理。

3.5.2 JavaScript常用事件

多數瀏覽器內部對象都擁有很多事件，下面將以表格的形式給出常用的事件及何時觸發這些事件。JavaScript的常用事件如表3.7所示。

表3.7 JavaScript的常用事件

3.5.3 事件處理程序的調用

在使用事件處理程序對頁面進行操作時，最主要的是如何通過對象的事件來指定事件處理程序。指定方式主要有以下兩種。

1．在JavaScript中

在JavaScript中調用事件處理程序，首先需要獲得要處理對象的引用，然后將要執行的處理函數賦值給對應的事件。

【例3.28】在JavaScript中調用事件處理程序。代碼如下：

        <input name="bt_save" type="button" value="保存">
          <script language="javascript">
            var b_save=document.getElementById("bt_save");
            b_save.onclick=function(){
                alert("單擊了保存按鈕");
            }
          </script>

說明

在頁面中加入上面的代碼并運行，當單擊“保存”按鈕時，將彈出“單擊了保存按鈕”對話框。

注意

在上面的代碼中，一定要將“<input name="bt_save" type="button" value="保存">”放在JavaScript代碼的上方，否則將彈出“'b_save’為空或不是對象”的錯誤提示。在JavaScript中指定事件處理程序時，事件名稱必須為小寫，才能正確響應事件。

2．在HTML中

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

【例3.29】在HTML中調用事件處理程序。代碼如下：

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

說明

在頁面中加入上面的代碼并運行，當單擊“保存”按鈕時，將彈出“單擊了保存按鈕”對話框。