網頁中的事件與事件響應

本文內容 

                     事件概述
                     編寫事件響應代碼
                     開發中的常用事件簡介
                     事件對象的獲取

---

★ 事件概述

事件與事件的處理

事件的概念

通常鼠標或用戶左擊的動作我們稱之為“事件（Event）” ，而對事件進行處理的函數 ，我們稱之為“事件處理程序（Event Handler）”；

事件可以由用戶引發（比如用戶點擊某個按鈕），也可能由代碼觸發（如向Web Service發出數據提取請求的代碼，隨時報告數據提取的進度以便在頁面顯示一個進度提示）；

絕大部分事件都是由用戶的動作所引發，如：用戶按鼠標的按鍵，就產生click事件，若鼠標的指針在鏈接上移動就產生mouseover事件等等。

  Web應用，其客戶端的代碼，多采用“事件驅動（Event-Driven）” 的運行模式。

事件與事件的響應代碼

事件處理的過程可以表達為：發聲事件 → 啟動事件處理程序 → 事件處理程序作出反應。

通常把這些事件響應代碼放到函數中，稱為“事件回調（call back）”函數。

 

♞ 事件的冒泡（Bubbling Phase）與捕獲（Capture Phase）

    △  DOM事件流

DOM(文檔對象模型)結構是一個樹型結構，當一個HTML元素產生一個事件時，該事件會在元素結點與根節點之間按特定的順序傳播，路徑所經過的節點都會收到該事件，這個傳播過程可稱為DOM事件流。

DOM事件流事件順序有兩種類型：捕獲型事件和冒泡型事件。

  △ 冒泡型事件（Bubbling Phase）  VS  捕獲型事件（Capture Phase）

冒泡型事件的基本思想是，事件按照從最特定的事件目標到最不特定的事件目標（document對象）的順序觸發；

捕獲型事件（Capture Phase），是Netscape使用的一種事件響應解決方案。捕獲型事件的基本思想是事件從最不精確的對象（document對象）開始觸發，然后到最精確的對象（可以是窗口級別捕獲事件，不過必須由開發人員特別指定），所以有人也稱之為自頂向下的事件模型。

因此冒泡和捕獲是恰好相反的兩個觸發執行順序。

//**DOM事件，冒泡事件，捕獲事件的參考

 “好好學一遍JavaScript 筆記(八)——冒泡型事件、捕獲型事件”

**//

☢ 注意點

     並非所以的瀏覽器都支持這兩類型的事件，就算支持，其事件響應代碼的編寫方式也未必一致。

 

★  編寫事件響應代碼

方式 1

在事件源對象所對應的HTML標簽上增加一個要處理事件屬性，讓事件屬性值等於處理事件的函數名或程序代碼。

1. <元素名字on事件名稱="<語句塊> | <函數名>">
2. // 一般來說，簡短的事件響應代碼可直接嵌入到標簽中。
3. <button onclick="alert("Hello!")">
4. Run some JavaScript
5. </button>

 

方式 2

 

方式 3

也可以全部用代碼實現，使用代碼直接設置  HTML元素對象的時間屬性，讓事件屬性值等於處理該事件的函數名或程序代碼。

1. 對象.on事件=<語句>|<函數名>//語法格式
2. //實際應用
3. myElement.onClick=function(){
4. //...
5. //your event handler code
6. //...
7. };

 

方式 4  —— 注冊/取消事件監聽函數的方法參數

DOM中的方法

1. element.addEventListener('click',observer,useCapture);
2. //注冊事件監聽函數
3. element.removeEventListener('click',observer,useCapture);
4. //移除已注冊的事件監聽函數，參數不變
5. //addEventListener方法接收三個參數；
6. //第一個參數是事件名稱，
7. //第二個參數observer是回調處理函數，
8. //第三個參數注明該函數是在時間傳遞過程中的捕獲階段被調用還是冒泡階段被調用。

 

特殊的IE

    不同的瀏覽器，提供不同的函數給元素添加事件響應代碼。比如早期的IE，就是使用attachEvent( )方法；

1. // Internet Explorer 8 and previous
2. document.attchEvent('onclick',myFunction);

 

方式  5    事件驅動

處理兼容性問題--添加事件驅動

處理兼容性問題--取消事件驅動

 

☆ 好消息！

在實際開發中推薦使用jQuery等庫，因為它們已將兼容性代碼包容，並且經過測試，直接使用他們比較方便可靠。

 

方式  6   取消事件的繼續傳遞

取消事件的繼續傳遞是指，在特定的地方中斷捕獲型事件或冒泡型時間的進一步傳遞，即“某事件的傳遞到此為止”！

1. //跨瀏覽器取消事件傳遞的典型代碼
2. function someHandler(event){
3. event =event || window.event;
4. if(event.stopPropagation){
5. event.stopPropagation();
6. }else{
7. event.cancelBubble =true;
8. }
9. }

 

方式 6  禁用事件傳遞后的默認處理

時間傳遞后的默認處理是指，通常瀏覽器在事件傳遞並處理完畢后會執行與該時間關聯的默認動作（如果存在這樣的動作）。

例如，如果表單中input 元素的type屬性是“submit”，那么它被點擊后，瀏覽器就自動提交表單，如果你已經為這個元素的click事件手寫了其他代碼，那么你可能需要禁用瀏覽器的這個默認動作。

1. //跨瀏覽器的禁用“事件傳遞后的默認響應功能”示例代碼
2. function someHandler(event){
3. event=event || window.event;
4. if(event.preventDefault){
5. event.preventDefault();
6. }else{
7. event.returnValue=false;
8. }
9. }

 

★ HTML元素常見事件列表

（以下列表中所提到的屬性可插入HTML標簽中以定義事件處理程序）

屬性對象	屬性	當以下情況發生時，出現此事件
document	onabort	圖像加載被中斷
	onblur	元素失去焦點
	onchange	用戶改變域的內容
	onclick	鼠標點擊某個對象
	ondbclick	鼠標雙擊某個圖像
	onerror	當加載文檔或圖像時發生某個錯誤
	onfocus	元素獲得焦點
鍵盤按鍵	onkeydown	某個鍵盤的鍵被按下
	onkeypress	某個鍵盤的鍵被按下或按住
	onkeyup	某個鍵盤的鍵被松開
	onload	某個頁面或圖像完成加載
鼠標	onmousedown	某個鼠標鍵被按下
	onmousemove	鼠標指針在移動
	onmouseout	鼠標從某元素移開
	onmouseover	鼠標移動到某元素之上
	onmouseup	某個鼠標按鍵被松開
	onreset	重置按鈕·被點擊
	onresize	窗口或框架被調整尺寸
	onselect	文本被選定
	onsubmit	提交按鈕被點擊
	onunload	用戶退出頁面

 

★  事件對象的獲取

事件對象封裝了時間的相關信息（比如此事件是由哪個元素觸發的）。

IE中，時間對象是window對象的屬性event，事件處理函數可以按如下方式訪問事件對象：

1. // IE中事件處理
2. btnSubmit.onclick =function(){
3. varoevent = window.event;
4. }

 

DOM標准中，event對象是作為唯一的參數傳遞給事件處理函數：

1. //DOM中對事件的處理
2. btnSubmit.onclick=function(oevent){
3. alert(oevent);
4. }

 

事件對象獲取示例

1. <button onclick="demo(event,this)">click</button>
2. <!--事件函數中可傳遞事件對象event，this表示當前的button對象-->
4. <script>
5. function demo(event){
6. if(event.type ="click"){
7. alert("clicked!");
8. }
9. var iKeyCode = event.keyCode;
10. /*獲取按鈕*/
11. var iClientX = event.clientX;
12. var iClientY = event.clientY;
13. /*獲取事件的客戶端X,Y坐標*/
14. }
15. </script>

 

 

 

注：更多關於 響應事件的示例

 

 

 

來自為知筆記(Wiz)