在很多語言的學習中,“事件”都是一個比較難理解,但是又是一個很重要的概念。javascript中的事件處理也是一樣,正因為有了事件處理,才會出現Ajax拖動的效果。本文就討論一下JavaScript中的事件處理,讀過之後,您就會知道,很多Ajax框架實現拖動效果的原理了。
一、 IE Event物件
(一)IE Event物件的主要屬性和方法
在IE中有一個專門負責事件處理的物件Event,這個物件負責對事件的處理,含有很多的屬性和方法,通過這些方法和屬性的呼叫,就能完成很多的事件處理。
type:事件的型別,就是HTML標籤屬性中,沒有“on”字首之後的字串,例如“Click”就代表單擊事件。
srcElement:事件源,就是發生事件的元素。
button:宣告瞭被按下的滑鼠鍵,是一個整數。1代表滑鼠左鍵,2代表滑鼠右鍵,4代表滑鼠的中間鍵,如果按下了多個滑鼠鍵,就把這些值加在一起,所以3就代表左右鍵同時按下。
clientX/clientY:是指事件發生的時候,滑鼠的橫、縱座標,返回的是整數,它們的值是相對於包容視窗的左上角生成的。
offsetX/offsetY:滑鼠指標相對於源元素的位置,可以確定單擊Image物件的哪個象素。
altKey,ctrlKey,shiftKey:顧名思義,這些屬性是指滑鼠事件發生的時候,是否同時按住了Alt、Ctrl或者Shift鍵,返回的是一個布林值。
keyCode:返回keydown和keyup事件發生的時候,按鍵的程式碼以及keypress事件的Unicode字元。
fromElement、toElement前者是指代mouseover事件移動過的文件元素,後者指代mouseout事件中滑鼠移動到的文件元素。
cancelBubble:一個布林屬性,把它設定為true的時候,將停止事件進一步起泡到包容層次的元素。
returnValue:一個布林值屬性,設定為false的時候可以組織瀏覽器執行預設的事件動作,相當於<a href=”#” onclick=”ProcessMethod();return false;” />。
attachEvent()和detachEvent()方法:為制定DOM物件事件型別註冊多個事件處理函式的方法,它們有兩個引數,第一個是事件型別,第二個是事件處理函式。在attachEvent()事件執行的時候,this關鍵字指向的是window物件,而不是發生事件的那個元素。
(二)IE Event物件的一些說明
1.IE Event物件是一個全域性屬性
在IE中,不能把Event物件作為引數傳遞給事件處理程式,只能用window.event或者event來引用Event物件。因為在IE中,Event是window的一個屬性,也就是說event是一個全域性變數,這個變數提供了事件的細節。
2.IE中事件的起泡:IE中事件可以沿著包容層次一點點起泡到上層,也就是說,下層的DOM節點定義的事件處理函式,到了上層的節點如果還有和下層相同事件型別的事件處理函式,那麼上層的事件處理函式也會執行。例如,<div>標籤包含了<a>,如果這兩個標籤都有onclick事件的處理函式,那麼執行的情況就是先執行<a>標籤的onclick事件處理函式,再執行<div>的事件處理函式。如果希望<a>的事件處理函式執行完畢之後,不希望執行上層的<div>的onclick的事件處理函式了,那麼就把cancelBubble設定為false即可。