Client-SideJavaScript-静宜大学.PPT

Events Event Handling 靜宜大學資管系 蔡奇偉 副教授 內容大綱 事件驅動模式的程式 事件的分類 四種事件模型 事件的差異 瀏覽器均有的事件 瀏覽器獨有的事件 事件的分類與說明 指定事件處理碼的方法 事件處理碼的傳回值 事件物件 事件的傳遞方式 事件驅動模式的程式 事件的分類 使用者操作引發的事件， 如：按下滑鼠鍵、改變文字欄裏的內容、移動滑鼠游標通過超連結、…、等等 瀏覽器狀態改變所引發的事件，如：載入新網頁和離開網頁 計時器（Timer）引發的事件 錯誤（ Error ）引發的事件 四種事件模型 原始的事件模型 源自於 Netscape 4 規格的一個簡單事件模型 又稱為 DOM Level 0 的事件模型 所有具有 JavaScript 功能的瀏覽器都支援此事件模型 標準的事件模型 DOM Level 2 所定義的事件模型 Netscape 6 和 Mozilla 瀏覽器支援 IE 的事件模型 IE 4 以後的 IE 瀏覽器所採用事件模型 Netscape 4 事件模型 Netscape 4 的事件模型 Netscape 6 仍支援其中部分的功能 事件的差異 Netscape 4、 IE 和 DOM Level 2 各有若干特殊的事件，我們必須注意這些不相容性。 Netscape 4 的事件通常只能用在特定的 HTML 元件。 IE 和 DOM Level 2 大部份的事件都適用於所有的 HTML 元件。 三者的事件傳遞方式不同 瀏覽器均有的事件 Abort Blur Change Click DblClick Error Focus KeyDown KeyPress KeyUp Load MouseDown MouseMove MouseOut MouseOver MouseUp Move Reset 瀏覽器獨有的事件 事件的分類與說明 滑鼠事件 鍵盤事件 表單事件 文件事件 視窗事件 其它事件 滑鼠事件 鍵盤事件 表單事件 文件事件 視窗事件 其它事件 指定事件處理碼的方法 事件名稱和事件處理碼名稱 在 HTML 標籤中指定事件處理碼 在 JavaScript 程式中指定事件處理碼 IE 獨有的指定事件處理碼方式 事件名稱和事件處理碼名稱 在 HTML 標籤中指定事件處理碼 在 JavaScript 程式中指定事件處理碼 IE 獨有的指定事件處理碼方式 事件處理碼的傳回值 事件物件 什麼是事件物件？ IE 的事件物件 Netscape 4 的事件物件 什麼是事件物件？ IE 的事件物件 上面規則的一個例外情形是：當滑鼠移到超連結上時，瀏覽器會在狀態欄上顯示超連結的 URL 資訊。若要取消顯示這個資訊，我們必須把 mouseover 處理碼的傳回值設成 true，如底下的範例所示： a href=“help.html” onmouseover=“return true;”Help/a 若事件處理碼不傳回一個值的話，瀏覽器則按照預設的方式處理該事件。 * * 所有與瀏覽者互動的 JavaScript 程式都採用事件驅動（event driven）的架構。在這個架構下，瀏覽器會產生一些事件（event）來反映某些有趣的狀況發生在網頁或網頁元件中；譬如以下的狀況都會觸發瀏覽器產生相關的事件： 網頁完全下載後、 瀏覽者的滑鼠遊標滑過超連結、 瀏覽者按下表單中的傳送按鈕、…、等等。 若對處理某事件有興趣，你就必須在適當的元件中設定此事件的處理碼（event handler）。當這事件發生時，瀏覽器就會自動執行你所提供的事件處理碼。 我們可以把事件分為下列四類： 由於瀏覽器事件模型的差異性，使用某個瀏覽器（如 IE ）獨有的事件進階功能常會造成其它瀏覽器（如 Netsacpe）的錯誤。 Resize Select Submit Unload DragDrop BeforeCopy BeforeCut BeforePaste BeforePrint BeforeUnload Bounce ContextMenu Copy Cut Drag DragEnd Netscape IE DragEnter DragLeave DragOver DragStart Drop FilterChange Finish FocusIn FocusOut Help MouseEnter MouseLeave MouseLeave MouseWheel MoveEnd MoveStart Paste Scroll SelectStart Start Click 發生時機：使用者在網頁元件上點一下滑鼠左鍵。 適用元件： N2, IE3: a, area, input N4: button, radio, check