3. JavaScript事件處理

來源:互聯網
上載者:User

使用者可以通過多種方式與瀏覽器中的頁面進行互動,而事件是互動的橋樑。 Web開發人員可以通過JavaScript內建的或者自訂的事件處理器來響應使用者的動作。

 什麼是事件

廣義上講,Javascript指令碼中的事件是指使用者載入目標頁面直到該頁面被關閉期間瀏覽器的動作及該頁面對使用者操作的響應(如滑鼠移動、當前頁面的載入關閉,鍵盤輸入,拖拽頁面圖片,單擊浮動菜單等)。

事件處理器 是指與特定的文本和特定的事件相關聯的JavaScript代碼,當該文本發生改變或者事件被觸發時,瀏覽器執行該代碼並進行相應的處理操作,而響應某個事件從而進行改變或的處理過程即稱為事件處理。

下面是簡單的事件觸發和處理的過程:


事件捆綁

HTML文檔將元素的常用事件當做屬性捆綁在HTML元素上,當該元素的特定事件發生時,對應於此特定事件的事件處理器就會被執行,並將處理結果返回給瀏覽器。事件捆綁導致特定的代碼放置在所處對象的事件處理器中。

樣本:

<a href="http://www.baidu.com/" onclick=MyClick()">我是超連結</a>

function MyClick(){

alert("點擊了超連結");

}


1. HTML文檔事件

HTML文檔事件包括使用者載入目標頁面知道該頁面被關閉期間瀏覽器的動作及該頁面對使用者操作的響應。主要分為:瀏覽器事件 和 HTML元素事件兩大類。

  1.1 瀏覽器事件

瀏覽器事件指:載入文檔知道該文檔被關閉期間的瀏覽器事件。如瀏覽器載入文檔事件onload、關閉該文檔事件onunload、瀏覽器失去焦時間點事件onblur、擷取焦時間點事件onfocus、拖動捲軸事件onscroll、調整視窗大小事件onresize等。

  1.2 HTML元素事件

載入頁面後,使用者與頁面的互動主要指發生在如按鈕、連結、表單、圖片等HTML元素上的使用者動作以及該頁面對此動作所作出的響應。如按一下滑鼠按鈕事件(元素為button,事件為click,事件處理器為onclice)。只要瞭解了該事件的相關資訊,就可以編寫針對此介面的事件處理常式,也稱事件處理器,以完成諸如表單驗證、文字框內容選擇等功能。

HTML文檔中元素對應的事件因元素類型而異,下表按HTML4標記類型列出了當前通用版本瀏覽器上支援的事件:

通用瀏覽器上定義的事件
標記類型 標記列表 事件觸發模型 簡要說明
串連 <A> onclick
ondbclick
onmouseDown
onmouseOut
onmouseOver
onmouseUp
onKeyDown
onkeyPress
onkeyUp
按一下滑鼠連結
滑鼠雙擊串連
滑鼠在連結的位置按下
滑鼠移出連結所在的位置
滑鼠經過串連所在的位置
滑鼠在連結的位置放開
鍵被按下
按下並放開該鍵
鍵被鬆開
圖片 <IMG> onerror
onload
onkeyDown
onkeyPress
onkeyUp
載入圖片出錯
圖片被載入時觸發
鍵被按下
按下並鬆開該鍵
鍵被鬆開
地區 <AREA> onDbClick
onMouseOut
onMouseOver
雙擊該圖形映射地區
滑鼠從該圖形映射地區內移動到之外
滑鼠從該影像地圖地區外移動到之內
文檔主體 <BODY> onBlur
onClick
onDbClick
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseUp

幀、幀組 <FRAME>
<FRAMESET>
onblur
onerror
onfocus
onload
onresize
onunload

表單 <FORM> onReset
onSubmit

按鈕 <INPUT TYPE=
"button">
onBlur
onClick
onFocus
onMouseDown
onMouseUp

複選框
單選框
<INPUT TYPE=
"checkbox"> 
="radio"
onBlur
onClick
onFocus

複位按鈕
提交按鈕
<INPUT TYPE=
"reset">
="submit"
onBlur
onClick
onFocus

口令欄位 <INPUT TYPE=
"password"
onBlur
onFocus

文字欄位 <INPUT TYPE=
"text">
onBlur
onChange
onFocus
onSelect

文本區 <TEXTAREA> onblur
onchange
onfocus
onKeyDown
onKeyPress
onKeyup
onSelect

選項 <SELECT> onblur
onchange
onfocus






































出於友好、保密、著作權等方面的考慮,通用瀏覽器上實現的事件已經不能滿足Javascript開發人員的需求,各大瀏覽器廠商都更新了自己的事件模型,擴充了自身支援的事件類型。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.