Javascript中的事件–Event對象

Event是Javascript中的重要事件，event代表事件的狀態，專門負責對事件的處理，它的屬性和方法能協助我們完成很多和使用者互動的操作,下面是對這個對象的簡單總結，希望跟大家一起學習

一、Event對象的主要屬性和方法
　　
　　1.type：事件的類型，就是HTML標籤屬性中，沒有“on”首碼之後的字串，例如“Click”就代表單擊事件。

　　2.srcElement：事件來源，就是發生事件的元素。比如<a ></a> a這個連結是事件發生的源頭，也就是該事件的srcElement。(非IE中用target)

　　3.button：聲明了被按下的滑鼠鍵，是一個整數。0代表沒有按鍵，1代表滑鼠左鍵，2代表滑鼠右鍵，4代表滑鼠的中間鍵，如果按下了多個滑鼠鍵，就把這些值加在一起，所以3就代表左右鍵同步選取。

　　4.clientX/clientY：是指事件發生的時候，滑鼠的橫、縱座標，返回的是整數，它們的值是相對於包容視窗的左上方產生的。

　　5.offsetX/offsetY：滑鼠指標相對於源元素的位置，可以確定單擊Image對象的哪個象素。

　　6.altKey，ctrlKey，shiftKey：顧名思義，這些屬性是指滑鼠事件發生的時候，是否同時按住了Alt、Ctrl或者Shift鍵，返回的是一個布爾值。

　　7.keyCode：返回keydown和keyup事件發生的時候，按鍵的代碼以及keypress事件的Unicode字元。比如event.keyCode=13代表按下了斷行符號鍵；

　　8.fromElement、toElement前者是指代mouseover事件移動過的文件項目，後者指代mouseout事件中滑鼠移動到的文件項目。

　　9.cancelBubble：一個布爾屬性，把它設定為true的時候，將停止事件進一步起泡到包容層次的元素，它用於檢測是否接受上層元素的事件的控制。true代表不被上層元素的事件控制，false代表允許被上層元素的事件控制。

　　10.returnValue：一個布爾值屬性，設定為false的時候可以阻止瀏覽器執行預設的事件動作，相當於<a href=”#” onclick=”ProcessMethod();return false;” />。

　　11.attachEvent()和detachEvent()方法：為制定DOM對象事件類型註冊多個事件處理函數的方法，它們有兩個參數，第一個是事件類型，第二個是事件處理函數。在attachEvent()事件執行的時候，this關鍵字指向的是window對象，而不是發生事件的那個元素。

二、 IE Event對象的一些說明

　　Event對象是一個全域屬性
　　在IE中，不能把Event對象作為參數傳遞給事件處理常式，只能用window.event或者event來引用Event對象。因為在IE中，Event是window的一個屬性，也就是說event是一個全域變數，這個變數提供了事件的細節。

三、關於事件的起泡的概念

　　IE中事件的起泡：IE中事件可以沿著包容層次一點點起泡到上層，也就是說，下層的DOM節點定義的事件處理函數，到了上層的節點如果還有和下層相同事件類型的事件處理函數，那麼上層的事件處理函數也會執行。例如，<div>標籤包含了<a>，如果這兩個標籤都有 onclick事件的處理函數，那麼執行的情況就是先執行<a>標籤的onclick事件處理函數，再執行<div>的事件處理函數。如果希望<a>的事件處理函數執行完畢之後，不希望執行上層的<div>的onclick的事件處理函數了，那麼就把 cancelBubble設定為false即可。

四、W3C DOM標準中的Event
和IE不同的是，W3C DOM中的Event對象並不是window全域對象下面的屬性，換句話說，event不是全域變數。通常在DOM二級標準中，event作為發生事件的文檔對象的屬性。Event含有兩個子介面，分別是UIEvent和MutationEvent，這兩個子介面實現了Event的所有方法和屬性，而 MouseEvent介面又是UIEvent的子介面，所以實現了UIEvent和Event的所有方法和屬性。下面，我們就看看Event、 UIEvent和MouseEvent的主要屬性和方法。
　　1.Event
　　 type：事件類型，和IE類似，但是沒有“on”首碼，例如單擊事件只是“click”。
　　 target：發生事件的節點。
　　 currentTarget：發生當前正在處理的事件的節點，可能是Target屬性所指向的節點，也可能由於捕捉或者起泡，指向Target所指節點的父節點。
　　 eventPhase：指定了事件傳播的階段。是一個數字。
　　 timeStamp：事件發生的時間。
　　 bubbles：指明該事件是否起泡。
　　 cancelable：指明該事件是否可以用preventDefault()方法來取消預設的動作。
　　 preventDefault()方法：取消事件的預設動作；
　　 stopPropagation()方法：停止事件傳播。
　　2.UIEvent
　　 view：發生事件的window對象。
　　 detail：提供事件的額外資訊，對於單擊事件、mousedown和mouseup事件都代表的是點擊次數。
　　3.MouseEvent
　　　button：一個數字，指明在mousedown、mouseup和單擊事件中，滑鼠鍵的狀態，和IE中的button屬性類似，但是數字代表的意義不一樣，0代表左鍵，1代表中間鍵，2代表右鍵。
　　　altKey、ctrlKey、shiftKey、metaKey：和IE相同，但是IE沒有最後一個。
clientX、clientY：和IE的含義相同，但是在DOM標準中，這兩個屬性值都不考慮文檔的滾動情況，也就是說，無論文檔滾動到哪裡，只要事件發生在視窗左上方，clientX和clientY都是0，所以在IE中，要想得到事件發生的座標相對於文檔開頭的位置，要加上 document.body.scrollLeft和document.body.scrollTop。
　　　screenX、screenY：滑鼠指標相對於顯示器左上方的位置，如果你想開啟新的視窗，這兩個屬性很重要。
　　　relatedTarget：和IE中的fromElement、toElement類似，除了對於mouseover和mouseout有意義外，其他的事件沒什麼意義。