1.事件概述
JavaScript與Web頁面之間的交互時通過用戶操作瀏覽器頁面時觸發相關事件來實現的。例如:
在頁面載入完畢時,將處罰load(載入)事件;
當用戶單擊按鈕時,將觸發按鈕的click事件等。
用戶響應某個事件而執行的處理程序稱為事件處理程序。例如:
當用戶單擊按鈕時,將觸發按鈕的事件處理程序onClick。
事件處理程序的兩種分配方式
(1)在JavaScript中分配事件處理程序
例:
<img src="http://gi3.md.alicdn.com/bao/uploaded/i3/TB1tlxaHpXXXXXtaXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg" id="aimage">
<script language="javascript">
var img = document.getElementById("aimage");
img.onclick = function() {
alert('單擊了圖片');
}
</script>
在頁面中加入上面的代碼并運行,則當單擊圖片aimage時,將彈出“單擊了圖片”對話框。
在JavaScript中分配時間處理程序時,事件處理程序名稱必須小寫,才能正確響應事件。
(2)在HTML中分配事件處理程序
例:
<img src="http://gi3.md.alicdn.com/bao/uploaded/i3/TB1tlxaHpXXXXXtaXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg" onclick="alert('單擊了圖片');">
2.事件類型
UI事件:如load、unload、error、resize、scroll、select、DOMActive,是用戶與頁面上的元素交互時觸發的。
焦點事件:如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout,在元素獲得或失去焦點的時候觸發,這些事件當中,最為重要的是blur和focus,有一點需要引起注意,這一類事件不會發生冒泡!
鼠標與滾輪事件:如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup,是當用戶通過鼠標在頁面執行操作時所觸發的。
滾輪事件:mousewheel(IE6+均支持)、DOMMouseScroll(FF支持的,與mousewheel效果一樣)。是使用鼠標滾輪時觸發的。
文本事件:textInput,在文檔中輸入文本觸發。
鍵盤事件:keydown、keyup、keypress,當用戶通過鍵盤在頁面中執行操作時觸發。
合成事件:DOM3級新增,用于處理IME的輸入序列。所謂IME,指的是輸入法編輯器,可以讓用戶輸入在物理鍵盤上找不到的字符。compositionstart、compositionupdate、compositionend三種事件。
變動事件:DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等,當底層DOM結構發生變化時觸發。IE8-不支持。
變動名稱事件:指的是當元素或者屬性名變動時觸發,當前已經棄用!
對于事件的基本類型,隨著HTML5的出現和發展,又新增了HTML5事件、設備事件、觸摸事件、手勢事件等各種事件。
posted on 2015-03-24 10:58
marchalex 閱讀(196)
評論(0) 編輯 收藏 所屬分類:
Java Web