張智星 http://mirlab.org/jang 台大資工系 多媒體檢索實驗室 第八章 事件 張智星 http://mirlab.org/jang 台大資工系 多媒體檢索實驗室
本章大綱 大綱 主題 本章介紹網頁物件的各種相關事件，以及如何利用事件及事件處理程式來產生有趣互動的網頁。 8-1：事件與事件處理器 8-2：捕捉鍵盤與滑鼠事件 8-3：事件列表
8-1：事件與事件處理器 本小節介紹幾個瀏覽器所偵測到的事件與相關動作的範例。
事件 事件 (Events) 通常是指由瀏覽器所偵測到使用者的特定動作，並根據偵測到的事件，來進行相關動作，例如： 使用者點選或移動滑鼠 瀏覽器的載入網頁 「事件處理器」(Event handlers)，又稱為 Callback。我們可以在瀏覽器內偵測特定事件，並以事件處理器來做出反應。
瀏覽器常見的事件 列表簡介: onBlur：失去焦點時 onClick：點選某一個物件時 onChange：改變物件選項或字串時 onFocus：得到焦點時 onLoad：瀏覽器載入網頁時 onMousedown：按下滑鼠按鈕時 onMouseover：滑鼠移動經過某個物件時 onMouseup：鬆開滑鼠按鈕時 onSubmit：送出表單資訊時 onUnload：瀏覽器離開網頁時
範例8-1 主題:使用 onFocus 和 onBlur 事件改變文字欄位的內容 連結:onFocus01.htm (remote host, local host) 程式碼重點 說明 this 代表此文字欄位本身。 只要使用者點選文字欄位，onFocus 的事件被啟動。反之，在欄位外任意處點一下，onBlur 的事件就會被啟動。 <input value="請點我！" size=30 onBlur="this.value='唉，又要離我而去了！'" onFocus="this.value='很高興我又成為鎂光燈的焦點了！'">
範例8-2 主題:「送往迎來」 (使用 body 標籤的 onLoad 和 onUnload 屬性，定義載入網頁和離開網頁時必須處理的事件) 連結:onLoad01.htm (remote host, local host) 程式碼重點 說明 當載入網頁時執行alert(string1)，離開網頁時執行alert(string2)。 也可以使用 window.onLoad=functionName1 和window.onUnload=function2 來達到同樣的效果。 <body onLoad=“alert(string1)” onUnload="alert(string2)">
範例8-3(1) 主題:打不死的蟑螂 (使用onBeforeUnload，當關閉視窗時，再開啟另一視窗) 連結:foreverCockroach01.htm (remote host, local host) 程式碼重點 It’s not working any more. Who can help? <body onBeforeUnload="openNewWin()"> <script> function openNewWin(){ winName = Math.floor(Math.random()*10000); window.open('foreverCockroach01.htm', winName, 'location=1,toolbar=1,menubar=1,status=1'); } </script>
範例8-3(2) 說明 在視窗被關閉前，執行函式openNewWin()。 使用固定視窗名字將無法開新視窗，因此使用亂數產生winName。 window.open為開啟新視窗並設定新視窗屬性。 強制結束「打不死的蟑螂」: 關閉網路，關掉視窗，再連接網路。 取消 IE 瀏覽器對 JavaScript 的支援：將「工具/網際網路選項/安全性/自訂層級/指令碼處理/Active scripting」暫時改成「停用」，關掉「打不死的蟑螂」視窗，恢復原先設定。 從工作管理員將瀏覽器關閉。 從軟體選項選用「禁止彈出視窗」。
範例8-4 主題:列表各事件的範例 連結:onEvent01.htm (remote host, local host) 說明
8-2:捕捉鍵盤與滑鼠事件 本小節介紹鍵盤與滑鼠事件以及相關範例。
偵測特定按鍵是否被按下 步驟 利用 document.onkeydown 來抓到「按鍵事件」，並指定相關的事件處理程式。 可利用window.event.keycode 得知按鍵代碼，並進行相關的處理。
範例8-5 主題:鍵盤事件的基本測試 連結:keyboardEvent01.htm (remote host, local host) 程式碼重點 說明 使用 onkeydown 事件來執行 keyFunction() 函式。 event.keyCode可知該按鍵代碼。 事件處理程式回傳給 document.onkeydown 的值為 false，則原先按鍵的預設功能將會被取消。 window.event.keycode 可以簡寫成 event.keycode。 document.onkeydown=keyFunction;
定義「熱鍵」 用途 執行特殊功能 做法 為避免覆蓋原有的熱鍵功能，最好使用複合鍵（先按 Shift 或 Ctrl 或 Alt 不放，再按任意鍵）。
範例8-6 主題:偵測複合鍵 連結:keyboardEvent02.htm (remote host, local host) 程式碼重點 說明 用 event.shiftKey 的值是否是 true 來確認 Shift按鍵是否是在被按下的狀態 若不加第二個條件，會印出兩次警告視窗 ， 一次是按 Shift，第二次是按其他鍵 CTRL與ALT做法皆同於SHIFT if ((event.shiftKey) && (event.keyCode!=16)) alert("Shift + "+event.keyCode);
範例8-7 主題:作弄人的網頁 連結:keyboardEvent03.htm (remote host, local host) 程式碼重點 說明 使用 input 標籤的 onKeyPress 事件來即時改變使用者的輸入。 用onKeyUp 事件檢查使用者是否完成正確輸入。 <input id=testField onKeyPress="encrypt() " onKeyUp="check() ">
範例8-8 主題:黏住游標的方塊 連結:newCursor01.htm (remote host, local host) 程式碼重點 說明 使用DIV來定義紅色方塊的物件(id=redSquare) ，event.clientX 及 event.clientY 分別代表滑鼠相對應於網頁視窗的 X 和 Y 座標。 使用onmousemove事件，當滑鼠移動同時執行函式。 <body onmousemove="newCursor()"> <script> function newCursor() { redSquare.style.posLeft=event.clientX-10; redSquare.style.posTop=event.clientY-10; } </script>
範例8-9 主題:使用方向鍵來移動物件 連結: squareMover01.htm (remote host, local host) 程式碼重點 說明 使用event.keyCode判定使用者所按的方向鍵，並移動定義的DIV綠色方塊(id=myArea)。 function move(){ ek=event.keyCode; if (ek==37) myArea.style.posLeft-=5; if (ek==39) myArea.style.posLeft+=5; if (ek==38) myArea.style.posTop-=5; if (ek==40) myArea.style.posTop+=5; }
範例8-10 主題:偵測滑鼠鍵 連結: mouseEvent01.htm (remote host, local host) 程式碼重點 說明 定義一個DIV物件為滑鼠事件引發範圍 使用onMouseDown事件，當滑鼠點下執行函式 使用event.button偵測滑鼠按鍵 event.button = 1 ===> 滑鼠左鍵被按下 event.button = 2 ===> 滑鼠右鍵被按下 event.button = 4 ===> 滑鼠中鍵被按下 <div onMouseDown="showMouseButton()"> 請用滑鼠按我！</div>
範例8-11 主題:取消滑鼠右鍵的功能 連結:disableRightButton01.htm (remote host, local host) 程式碼重點 說明 使用 event.button 來偵測滑鼠鍵，如果是右鍵，則以警告視窗嘲笑使用者。並回傳 false，以取消預設之功能。 if (event.button!=1) { alert('哈哈，你別想偷圖，滑鼠右鍵的功能被我取消掉了！') return false;}
8-3:事件列表 本小節整理並列出常用的事件列表。
常用的滑鼠事件 滑鼠事件 說明 onMouseDown 按下滑鼠按鍵 onMouseOver 移動滑鼠游標 onMouseOut 將滑鼠游標移出一個物件 onMouseUp 釋放滑鼠按鍵 onClick 單擊滑鼠按鍵 onDblClick 雙擊滑鼠按鍵
判斷不同滑鼠按鍵 event.button 的值 說明 1 滑鼠左鍵被按下 2 滑鼠右鍵被按下 4 滑鼠中鍵被按下
常用的鍵盤事件 鍵盤事件 說明 onKeyDown 按下鍵盤按鍵 onKeyPress 保持按鍵在按下的狀態 onKeyUp 釋放鍵盤按鍵
常用的其他事件 事件名稱 說明 onBlur 一個物件得到焦點時 onError 產生錯誤時 onFocus 一個物件失去焦點時 onLoad 網頁或物件完全載入時 onReset 一個表單被重設時 onScroll 網頁文件被捲上或捲下時 onSelect 一個選單的選項被改變時 onSubmit 一個表單被提交送出時
以此取消一個事件遞傳（event bubble） 各種事件的相關性質(1) 產生事件之物件的性質 說明 srcElement 產生事件的物件或元素 type 事件的類別 returnValue 以此確認一個事件是否被取消 cancelBubble 以此取消一個事件遞傳（event bubble） clientX 滑鼠游標相對於視窗的 X 座標 clientY 滑鼠游標相對於視窗的 Y 座標 offsetX 滑鼠游標相對於發送事件之物件的 X 座標 offsetY 滑鼠游標相對於發送事件之物件的 Y 座標
各種事件的相關性質(2) 產生事件之物件的性質 說明 button 任一個被按下的滑鼠按鍵 altKey 當 alt 按鍵被按下時，回傳 true ctrlKey 當 ctrl 按鍵被按下時，回傳 true shiftKey 當 shift 按鍵被按下時，回傳 true keyCode 回傳被按下之按鍵的 unicode