1、Events&Event Handling靜宜大學資管系蔡奇偉 副教授內容大綱p事件驅動模式的程式p事件的分類p四種事件模型p事件的差異p瀏覽器均有的事件p瀏覽器獨有的事件p事件的分類與說明p指定事件處理碼的方法p事件處理碼的傳回值p事件物件p事件的傳遞方式事件驅動模式的程式所有與瀏覽者互動的 JavaScript 程式都採用事件驅動（event driven）的架構。在這個架構下，瀏覽器會產生一些事件（event）來反映某些有趣的狀況發生在網頁或網頁元件中；譬如以下的狀況都會觸發瀏覽器產生相關的事件：網頁完全下載後、瀏覽者的滑鼠遊標滑過超連結、瀏覽者按下表單中的傳送按鈕、等等。若對處理某事件
2、有興趣，你就必須在適當的元件中設定此事件的處理碼（event handler）。當這事件發生時，瀏覽器就會自動執行你所提供的事件處理碼。事件的分類p使用者操作引發的事件，如：按下滑鼠鍵、改變文字欄裏的內容、移動滑鼠游標通過超連結、等等p瀏覽器狀態改變所引發的事件，如：載入新網頁和離開網頁p計時器（Timer）引發的事件p錯誤（Error）引發的事件我們可以把事件分為下列四類：四種事件模型p原始的事件模型n源自於 Netscape 4 規格的一個簡單事件模型n又稱為 DOM Level 0 的事件模型n所有具有 JavaScript 功能的瀏覽器都支援此事件模型p標準的事件模型nDOM Leve
3、l 2 所定義的事件模型nNetscape 6 和 Mozilla 瀏覽器支援pIE 的事件模型nIE 4 以後的 IE 瀏覽器所採用事件模型pNetscape 4 事件模型nNetscape 4 的事件模型nNetscape 6 仍支援其中部分的功能由於瀏覽器事件模型的差異性，使用某個瀏覽器（如 IE）獨有的事件進階功能常會造成其它瀏覽器（如 Netsacpe）的錯誤。事件的差異pNetscape 4、IE 和 DOM Level 2 各有若干特殊的事件，我們必須注意這些不相容性。pNetscape 4 的事件通常只能用在特定的 HTML 元件。pIE 和 DOM Level 2 大部份的事
4、件都適用於所有的 HTML 元件。p三者的事件傳遞方式不同瀏覽器均有的事件pAbortpBlurpChangepClickpDblClickpErrorpFocuspKeyDownpKeyPresspKeyUppLoadpMouseDownpMouseMovepMouseOutpMouseOverpMouseUppMovepResetpResizepSelectpSubmitpUnload瀏覽器獨有的事件pDragDroppBeforeCopypBeforeCutpBeforePastepBeforePrintpBeforeUnloadpBouncepContextMenupCopypCut
5、pDragpDragEndNetscapeIEpDragEnterpDragLeavepDragOverpDragStartpDroppFilterChangepFinish pFocusInpFocusOutpHelppMouseEnterpMouseLeavepMouseLeavepMouseWheelpMoveEndpMoveStartpPastepScrollpSelectStartpStart事件的分類與說明p滑鼠事件p鍵盤事件p表單事件p文件事件p視窗事件p其它事件滑鼠事件Click發生時機：使用者在網頁元件上點一下滑鼠左鍵。適用元件：N2,IE3:a,area,inputN4:b
6、utton,radio,checkbox,submit,reset,linkHTML4,N6,IE4:大部分元件註：若處理碼傳回 false，則取消元件的預設行為（如 follow link,reset,submit 等）DblClick發生時機：使用者在網頁元件上快速點兩次滑鼠左鍵。適用元件：N4:document,linkHTML4,N6,IE4:大部分元件MouseDown發生時機：使用者在網頁元件上按住滑鼠左鍵。適用元件：N4:button,document,link,a,area,imgHTML4,N6,IE4:大部分元件MouseMove發生時機：使用者在網頁上移動滑鼠游標。適用元
7、件：HTML4,N6,IE4:大部分元件MouseOut發生時機：使用者把滑鼠游標移出網頁元件。適用元件：HTML4,N6,IE4:大部分元件N4:layer,linkMouseOver發生時機：使用者把滑鼠游標移到網頁元件的上方。適用元件：HTML4,N6,IE4:大部分元件註：在超連結元件中，處理碼傳回 true 可制止超連結 的 URL 出現在狀態行中。MouseUp發生時機：使用者放開滑鼠的左鍵。適用元件：HTML4,N6,IE4:大部分元件Netscape:a,area,img,button,document,link範例底下的滑鼠事件設定可製造出按鈕下壓的效果。不過只適用於 IE，
8、而不適用於 Netscape 4。鍵盤事件KeyDown發生時機：使用者按住鍵盤上的某一個鍵。適用元件：HTML4,N6,IE4:表單元件和 body 元件N4:input,textarea註：處理碼可傳回 false 來取消輸入的字元。KeyPress發生時機：使用者按下然後放開鍵盤上的某一個鍵。適用元件：HTML4,N6,IE4:表單元件和 body 元件N4:input,textarea註：處理碼可傳回 false 來取消輸入的字元。KeyUp發生時機：使用者放開鍵盤上的某一個鍵。適用元件：HTML4,N6,IE4:表單元件和 body 元件N4:input,textarea表單事件Bl
9、ur發生時機：使用者把輸入游標移出網頁元件。適用元件：HTML4,N2,IE3:button,input,label,select,textareaN3,IE4:bodyFocus發生時機：使用者把輸入游標移入網頁元件。適用元件：HTML4,N2,IE3:button,input,label,select,textareaN3,IE4:bodyChange發生時機：表單元件的內容改變了。適用元件：HTML4,N2,IE3:input,select,textareaReset發生時機：使用者按下表單的 reset 按鈕。適用元件：form註：處理碼可傳回 false 來取消表單的重置。Selec
10、t發生時機：使用者拉選 input 或 textArea 內的文字。適用元件：input,textArea Submit發生時機：使用者按下表單的 submit 按鈕。適用元件：form註：處理碼可傳回 false 來取消表單的傳送。文件事件Load發生時機：文件載入瀏覽器視窗之後。適用元件：HTML4,N2,IE3:body,framesetN3,IE4:imgN6,IE4:iframe,objectUnload發生時機：離開網頁時。適用元件：HTML4,N2,IE3:body,frameset視窗事件Move發生時機：使用者移動瀏覽器視窗。適用元件：N4,IE4:body,frameset
11、Resize發生時機：使用者變更瀏覽器視窗的大小。適用元件：N4,IE4:body,frameset其它事件Abort發生時機：當瀏覽者藉由選取另一個超連結、按下停止 按鈕、或其他的方式來放棄圖片的載入時。適用元件：N3,IE4:imgError發生時機：載入圖片時發生錯誤。適用元件：N3,IE4:img指定事件處理碼的方法p事件名稱和事件處理碼名稱p在 HTML 標籤中指定事件處理碼p在 JavaScript 程式中指定事件處理碼pIE 獨有的指定事件處理碼方式事件名稱和事件處理碼名稱只要在事件名稱之前加上 on 就是事件處理碼的名稱。譬如：事件 Abort 的處理碼是 onAbort、事件
12、 MouseDown 的處理碼是 onMouseDown、等等。不過，由於 HTML 並不區別屬性名稱的大小寫，再加上JavaScript 和 XHTML 都用小寫的事件處理碼名稱，所以目前的趨勢是用小寫的事件處理碼名稱。所以前述的大小寫混合的處理碼名稱可分別改寫成 onabort 和 onmousedown。在 HTML 標籤中指定事件處理碼若要處理某特定事件，你可以在處理該事件的元件標籤中，設定代表該事件的處理碼屬性；此屬性的值是一段處理該事件的 JavaScript 程式。指定的方式如下：譬如：指定事件處理碼:當瀏覽者藉由選取另一個超連結、按下停止按鈕、或其他的方式來放棄圖片的載入時。範
13、例有些網路小說網站用底下的事件處理碼設定技巧來防止瀏覽者拷貝網頁的文字：取消瀏覽器滑鼠右鍵的功能取消瀏覽器選取網頁內容的功能取消瀏覽器拷貝網頁內容的功能不過這個技巧僅適用於 IE 瀏覽器，對其他瀏覽器無效。在 JavaScript 程式中指定事件處理碼每個 HTML 元件的事件屬性都有對應的 JavaScript 屬性。因此，我們可以用 JavaScript 來指定元件的事件處理碼。譬如：document.myform.b1.onclick=function()alert(“謝謝”);事件屬性事件屬性的值必須是一個函式範例function confirmLink()return confirm
14、(“確定要連到“+this.href+“?”);function confirmAllLinks()for(var k=0;k document.links.length;k+)Document.linksk.onclick=confirmLink;下面的程式使得按網頁中任一的超連結，都會先出現一個詢問是否要連結的對話視窗。IE 獨有的指定事件處理碼方式IE 4 以上的 IE 瀏覽器提供以下範例所示的事件處理碼指定方式：alert(“Dont push me!”);兩者的屬性值相同事件處理碼的傳回值一般而言，若事件處理碼的傳回值是 false 的話，會制止瀏覽器處理該事件的預設行為。比方說，按
15、下表單的傳送按鈕，瀏覽器會開始傳送表單內容回伺服器。下面的例子示範如何取消傳送表單：validate_form()/check form dataif(bad_data)return false;上面規則的一個例外情形是：當滑鼠移到超連結上時，瀏覽器會在狀態欄上顯示超連結的 URL 資訊。若要取消顯示這個資訊，我們必須把 mouseover 處理碼的傳回值設成 true，如底下的範例所示：Help若事件處理碼不傳回一個值的話，瀏覽器則按照預設的方式處理該事件。事件物件p什麼是事件物件？pIE 的事件物件pNetscape 4 的事件物件什麼是事件物件？每當一個事件發生時，瀏覽器會建立一個事件物
16、件（event object），用來提供更詳盡的事件資訊，諸如：滑鼠的位置、按下那一個滑鼠按鈕、鍵盤按鍵值、等等。因此，我們可以運用事件物件裏的記錄來更精細地處理事件。然而，Netscape 4、IE、和 DOM 2 提供事件物件的方式和內容並不相同，這使得撰寫適用於三者的事件處理程式變得複雜許多。IE 的事件物件IE 的事件物件是 window.event 這個變數。底下列出它的屬性：屬性名稱型態儲存項目type字串事件的名稱，如 click,mouseover,等等。srcElement物件事件發生所在的元件button整數1:按下滑鼠的左按鈕2:按下滑鼠的右按鈕4:按下滑鼠的中按鈕屬性名
17、稱型態儲存項目clientXclientY整數事件發生時滑鼠的相對於視窗左上角的座標位置。offsetXoffsetY整數事件發生時的滑鼠相對於發生元件左上角的座標位置。alkKeyctrlKeyshiftKeyboolean事件發生時，是否按下 Alt、Ctrl、或 Shift 鍵。true:按下false:未按下keyCode整數keydown 或 keyup 事件傳回的按鍵 Unicode 字碼。你可以用函式 String.fromCharCode()將這字碼轉成字串。屬性名稱型態儲存項目fromElement物件進入事件發生元件之前，產生 mouseover 事件的元件toElemen
18、t物件mouseout 事件發生元件所進入的元件。cancelBubbleboolean取消事件向上傳遞（bubbling）的機制。returnValueboolean若設成 false，可以制止瀏覽器執行事件的預設行為，換句話說，這和之前所述的事件處理碼傳回 false 具有相同的作用。fromElementevent ElementtoElementmouseovermouseoutdocument.onkeydown=nextpagefunction nextpage()if(event.keyCode=13)/CRlocation=showbook.asp?bl_id=2145if(event.keyCode=39)/（單引號）location=readchapter.asp?Bu_id=45468&bl_id=2145範例 底下程式讓 Enter 鍵連結到書本的目錄網頁、單引號鍵連結到下一章。
