Events & Event Handling

Presentation on theme: "Events & Event Handling"— Presentation transcript:

1 Events & Event Handling
靜宜大學資管系 蔡奇偉 副教授

2 內容大綱 事件驅動模式的程式 事件的分類 四種事件模型 事件的差異 瀏覽器均有的事件 瀏覽器獨有的事件 事件的分類與說明
指定事件處理碼的方法 事件處理碼的傳回值 事件物件 事件的傳遞方式

3 事件驅動模式的程式 所有與瀏覽者互動的 JavaScript 程式都採用事件驅動（event driven）的架構。在這個架構下，瀏覽器會產生一些事件（event）來反映某些有趣的狀況發生在網頁或網頁元件中；譬如以下的狀況都會觸發瀏覽器產生相關的事件： 網頁完全下載後、 瀏覽者的滑鼠遊標滑過超連結、 瀏覽者按下表單中的傳送按鈕、…、等等。 若對處理某事件有興趣，你就必須在適當的元件中設定此事件的處理碼（event handler）。當這事件發生時，瀏覽器就會自動執行你所提供的事件處理碼。

4 事件的分類 我們可以把事件分為下列四類： 使用者操作引發的事件， 如：按下滑鼠鍵、改變文字欄裏的內容、移動滑鼠游標通過超連結、…、等等
瀏覽器狀態改變所引發的事件，如：載入新網頁和離開網頁 計時器（Timer）引發的事件 錯誤（ Error ）引發的事件

5 四種事件模型 原始的事件模型 標準的事件模型 IE 的事件模型 Netscape 4 事件模型
又稱為 DOM Level 0 的事件模型 所有具有 JavaScript 功能的瀏覽器都支援此事件模型 標準的事件模型 DOM Level 2 所定義的事件模型 Netscape 6 和 Mozilla 瀏覽器支援 IE 的事件模型 IE 4 以後的 IE 瀏覽器所採用事件模型 Netscape 4 事件模型 Netscape 4 的事件模型 Netscape 6 仍支援其中部分的功能 由於瀏覽器事件模型的差異性，使用某個瀏覽器（如 IE ）獨有的事件進階功能常會造成其它瀏覽器（如 Netsacpe）的錯誤。

6 事件的差異 Netscape 4、 IE 和 DOM Level 2 各有若干特殊的事件，我們必須注意這些不相容性。
Netscape 4 的事件通常只能用在特定的 HTML 元件。 IE 和 DOM Level 2 大部份的事件都適用於所有的 HTML 元件。 三者的事件傳遞方式不同

7 瀏覽器均有的事件 Abort Blur Change Click DblClick Error Focus KeyDown KeyPress
KeyUp Load MouseDown MouseMove MouseOut MouseOver MouseUp Move Reset Resize Select Submit Unload

8 瀏覽器獨有的事件 Netscape IE DragDrop BeforeCopy BeforeCut BeforePaste
BeforePrint BeforeUnload Bounce ContextMenu Copy Cut Drag DragEnd DragEnter DragLeave DragOver DragStart Drop FilterChange Finish FocusIn FocusOut Help MouseEnter MouseLeave MouseWheel MoveEnd MoveStart Paste Scroll SelectStart Start

9 事件的分類與說明 滑鼠事件 鍵盤事件 表單事件 文件事件 視窗事件 其它事件

10 滑鼠事件 Click 發生時機：使用者在網頁元件上點一下滑鼠左鍵。 適用元件：
N2, IE3: a, area, input N4: button, radio, checkbox, submit, reset, link HTML4, N6, IE4: 大部分元件 註：若處理碼傳回 false，則取消元件的預設行為（如 follow link, reset, submit 等）

11 發生時機：使用者在網頁元件上快速點兩次滑鼠左鍵。 適用元件：
DblClick 發生時機：使用者在網頁元件上快速點兩次滑鼠左鍵。 適用元件： N4: document, link HTML4, N6, IE4: 大部分元件 MouseDown 發生時機：使用者在網頁元件上按住滑鼠左鍵。 適用元件： N4: button, document, link, a, area, img HTML4, N6, IE4: 大部分元件

12 發生時機：使用者把滑鼠游標移出網頁元件。 適用元件：
MouseMove 發生時機：使用者在網頁上移動滑鼠游標。 適用元件： HTML4, N6, IE4: 大部分元件 MouseOut 發生時機：使用者把滑鼠游標移出網頁元件。 適用元件： HTML4, N6, IE4: 大部分元件 N4: layer, link

13 發生時機：使用者把滑鼠游標移到網頁元件的上方。 適用元件：
MouseOver 發生時機：使用者把滑鼠游標移到網頁元件的上方。 適用元件： HTML4, N6, IE4: 大部分元件 註：在超連結元件中，處理碼傳回 true 可制止超連結 的 URL 出現在狀態行中。 MouseUp 發生時機：使用者放開滑鼠的左鍵。 適用元件： HTML4, N6, IE4: 大部分元件 Netscape: a, area, img, button, document, link

14 底下的滑鼠事件設定可製造出按鈕下壓的效果。不過只適用於 IE，而不適用於 Netscape 4。 範例
<a href=" onmousedown='document.img1.src="down.jpg"' onmouseout='document.img1.src="normal.jpg"' onmouseover='document.img1.src="over.jpg"'> <img name="img1" src="normal.jpg" border=0> </a>

15 鍵盤事件 KeyDown 發生時機：使用者按住鍵盤上的某一個鍵。 適用元件： 註：處理碼可傳回 false 來取消輸入的字元。
HTML4, N6, IE4: 表單元件和 body 元件 N4: input, textarea 註：處理碼可傳回 false 來取消輸入的字元。

16 發生時機：使用者按下然後放開鍵盤上的某一個鍵。 適用元件：
KeyUp 發生時機：使用者放開鍵盤上的某一個鍵。 適用元件： HTML4, N6, IE4: 表單元件和 body 元件 N4: input, textarea KeyPress 發生時機：使用者按下然後放開鍵盤上的某一個鍵。 適用元件： HTML4, N6, IE4: 表單元件和 body 元件 N4: input, textarea 註：處理碼可傳回 false 來取消輸入的字元。

17 表單事件 Blur 發生時機：使用者把輸入游標移出網頁元件。 適用元件： Focus 發生時機：使用者把輸入游標移入網頁元件。 適用元件：
HTML4, N2, IE3: button, input, label, select, textarea N3, IE4: body Focus 發生時機：使用者把輸入游標移入網頁元件。 適用元件： HTML4, N2, IE3: button, input, label, select, textarea N3, IE4: body

18 發生時機：使用者按下表單的 reset 按鈕。 適用元件： form 註：處理碼可傳回 false 來取消表單的重置。
Change 發生時機：表單元件的內容改變了。 適用元件： HTML4, N2, IE3: input, select, textarea Reset 發生時機：使用者按下表單的 reset 按鈕。 適用元件： form 註：處理碼可傳回 false 來取消表單的重置。

19 Submit 發生時機：使用者按下表單的 submit 按鈕。 適用元件： form 註：處理碼可傳回 false 來取消表單的傳送。 Select 發生時機：使用者拉選 input 或 textArea 內的文字。 適用元件： input, textArea

20 文件事件 Load 發生時機：文件載入瀏覽器視窗之後。 適用元件： Unload 發生時機：離開網頁時。 適用元件：
HTML4, N2, IE3: body, frameset N3, IE4: img N6, IE4: iframe, object Unload 發生時機：離開網頁時。 適用元件： HTML4, N2, IE3: body, frameset

21 視窗事件 Move 發生時機：使用者移動瀏覽器視窗。 適用元件： Resize 發生時機：使用者變更瀏覽器視窗的大小。 適用元件：
N4, IE4: body, frameset Resize 發生時機：使用者變更瀏覽器視窗的大小。 適用元件： N4, IE4: body, frameset

22 其它事件 Abort 發生時機：當瀏覽者藉由選取另一個超連結、按下「停止」 按鈕、或其他的方式來放棄圖片的載入時。 適用元件： Error
發生時機：當瀏覽者藉由選取另一個超連結、按下「停止」 按鈕、或其他的方式來放棄圖片的載入時。 適用元件： N3, IE4: img Error 發生時機：載入圖片時發生錯誤。 適用元件： N3, IE4: img

23 指定事件處理碼的方法 事件名稱和事件處理碼名稱 在 HTML 標籤中指定事件處理碼 在 JavaScript 程式中指定事件處理碼
IE 獨有的指定事件處理碼方式

24 事件名稱和事件處理碼名稱 只要在事件名稱之前加上 on 就是事件處理碼的名稱。譬如：事件 Abort 的處理碼是 onAbort、事件 MouseDown 的處理碼是 onMouseDown 、…、等等。 不過，由於 HTML 並不區別屬性名稱的大小寫，再加上JavaScript 和 XHTML 都用小寫的事件處理碼名稱，所以目前的趨勢是用小寫的事件處理碼名稱。所以前述的大小寫混合的處理碼名稱可分別改寫成 onabort 和 onmousedown。

25 <tag eventHandler="JavaScript Code">
在 HTML 標籤中指定事件處理碼 若要處理某特定事件，你可以在處理該事件的元件標籤中，設定代表該事件的處理碼屬性；此屬性的值是一段處理該事件的 JavaScript 程式。指定的方式如下： <tag eventHandler="JavaScript Code"> 譬如： <IMG SRC=image.gif onabort="alert('Are you really too busy to wait?')"> 指定事件處理碼: 當瀏覽者藉由選取另一個超連結、按下「停止」按鈕、或其他的方式來放棄圖片的載入時。

26 有些網路小說網站用底下的事件處理碼設定技巧來防止瀏覽者拷貝網頁的文字： 範例
<body oncontextmenu="return false" onselectstart="return false" oncopy="return false"> 取消瀏覽器滑鼠右鍵的功能 取消瀏覽器選取網頁內容的功能 取消瀏覽器拷貝網頁內容的功能 不過這個技巧僅適用於 IE 瀏覽器，對其他瀏覽器無效。

27 在 JavaScript 程式中指定事件處理碼
每個 HTML 元件的事件屬性都有對應的 JavaScript 屬性。因此，我們可以用 JavaScript 來指定元件的事件處理碼。譬如： <form name=myform> <input name=b1 type=button value=“按我吧！”> </form> <script> document.myform.b1.onclick=function() {alert(“謝謝”);}; </script> 事件屬性 事件屬性的值必須是一個函式

28 下面的程式使得按網頁中任一的超連結，都會先出現一個詢問是否要連結的對話視窗。 範例
<script> function confirmLink () { return confirm(“確定要連到 “ + this.href + “?”); } function confirmAllLinks () for (var k = 0; k < document.links.length; k++) Document.links[k].onclick = confirmLink; </script> … <body onload=“confirmAllLinks();”>

29 IE 獨有的指定事件處理碼方式 IE 4 以上的 IE 瀏覽器提供以下範例所示的事件處理碼指定方式：
<script for=warning > alert(“Don’t push me!”); </script> … <input type=button id=warning value=“Click me”> 兩者的屬性值相同

30 事件處理碼的傳回值 一般而言，若事件處理碼的傳回值是 false 的話，會制止瀏覽器處理該事件的預設行為。比方說，按下表單的傳送按鈕，瀏覽器會開始傳送表單內容回伺服器。下面的例子示範如何取消傳送表單： <script> validate_form () { // check form data if (bad_data) return false; } … <form onsubmit=“return validate_form();”>

31 若事件處理碼不傳回一個值的話，瀏覽器則按照預設的方式處理該事件。
上面規則的一個例外情形是：當滑鼠移到超連結上時，瀏覽器會在狀態欄上顯示超連結的 URL 資訊。若要取消顯示這個資訊，我們必須把 mouseover 處理碼的傳回值設成 true，如底下的範例所示： <a href=“help.html” onmouseover=“return true;”>Help</a> 若事件處理碼不傳回一個值的話，瀏覽器則按照預設的方式處理該事件。

32 事件物件 什麼是事件物件？ IE 的事件物件 Netscape 4 的事件物件

33 什麼是事件物件？ 每當一個事件發生時，瀏覽器會建立一個事件物件（event object），用來提供更詳盡的事件資訊，諸如：滑鼠的位置、按下那一個滑鼠按鈕、鍵盤按鍵值、…、等等。因此，我們可以運用事件物件裏的記錄來更精細地處理事件。 然而，Netscape 4、IE、和 DOM 2 提供事件物件的方式和內容並不相同，這使得撰寫適用於三者的事件處理程式變得複雜許多。

34 IE 的事件物件 IE 的事件物件是 window.event 這個變數。底下列出它的屬性： 屬性名稱 型態 儲存項目 type 字串
事件的名稱，如 click, mouseover ,…, 等等。 srcElement 物件 事件發生所在的元件 button 整數 1: 按下滑鼠的左按鈕 2: 按下滑鼠的右按鈕 4: 按下滑鼠的中按鈕

35 屬性名稱 型態 儲存項目 clientX clientY 整數 事件發生時滑鼠的相對於視窗左上角的座標位置。 offsetX offsetY
事件發生時的滑鼠相對於發生元件左上角的座標位置。 alkKey ctrlKey shiftKey boolean 事件發生時，是否按下 Alt、Ctrl、或 Shift 鍵。 true: 按下 false: 未按下 keyCode keydown 或 keyup 事件傳回的按鍵 Unicode 字碼。你可以用函式 String.fromCharCode() 將這字碼轉成字串。

36 屬性名稱 型態 儲存項目 fromElement 物件 進入事件發生元件之前，產生 mouseover 事件的元件 toElement
mouseout 事件發生元件所進入的元件。 cancelBubble boolean 取消事件向上傳遞（bubbling）的機制。 returnValue 若設成 false，可以制止瀏覽器執行事件的預設行為，換句話說，這和之前所述的事件處理碼傳回 false 具有相同的作用。 mouseout fromElement mouseover event Element toElement

37 底下程式讓 Enter 鍵連結到書本的目錄網頁、單引號鍵連結到下一章。 範例
<script language=javascript> document.onkeydown=nextpage function nextpage() { if (event.keyCode==13) // CR location="showbook.asp?bl_id=2145" if (event.keyCode==39) // ‘（單引號） location="readchapter.asp?Bu_id=45468&bl_id=2145" } </script>