jQuery.event相容各瀏覽器的event詳細解析_jquery

介紹之前先介紹jQuery的一個方法jQuery.event.fix(event || window.event); 此方法個瀏覽器的event物件轉換為jQuery.event; 如果您的事件是透過jQuery方法綁定的，就不需要進行轉換了！

jQuery在遵循W3C規範的情況下，對事件的常用屬性進行了封裝，使得事件處理在各大瀏覽器下都可以正常的運行而不需要進行瀏覽器類型判斷。

1.event.type屬性
該方法作用是可以獲取到時間的類型

複製代碼 程式碼如下:

$("a").click(function(event){
    alert(event.type); //取得時間類型
    return false ; //阻止連結跳轉
})

以上程式碼執行後會回傳：「click」。

2.event.preventDefault()方法
此方法的作用是阻止預設的事件行為。 JavaScript中符合W3C規範的preventDefault()方法在IE瀏覽器中無效。 jQuery對其進行了封裝，使其兼容各種瀏覽器。

3.event.stopPropagation()方法
此方法是阻止事件的冒泡。 JavaScript中符合W3C規範的stopPropagation()方法在IE瀏覽器中無效。 jQuery對其進行封裝，使其相容於各種瀏覽器。

4.event.target屬性
event.target屬性的作用是取得到出發事件的元素。 jQuery對其封裝後，避免了W3C、IE和safari瀏覽器不同標準的差異。

複製程式碼 程式碼如下:

$("a[href=http://www .jb51.net]").click(function(event){
    alert(event.target.href); //取得觸發事件的元素的href屬性值
    alert(event.target. tagName); //獲取觸發事件的元素的標籤名稱
    return false; //阻止鏈接跳轉})

5.event.relatedTarget屬性
在標準DOM中，mouseover和mouseout所發生的元素可以透過event.target()方法來訪問，相關元素是透過event.relatedTarget屬性來存取的。 event.relatedTarget屬性在mouseover中相當於IE瀏覽器的event.fromElement屬性，在mouseout中相當於IE瀏覽器的event.toElement,jQuery對其進行了封裝，使其兼容各種瀏覽器。

6.event.pageX/event.pageY屬性
此方法的作用是取得到遊標相對頁面的x座標和y座標。如果沒有使用jQuery時，那麼IE瀏覽器中是用event/event.y方法，而在Firefox瀏覽器中使用event.pageX/event.pageY方法。如果頁上有捲軸，則也要加上捲軸的寬度和高度。在IE瀏覽器中也應該減去預設的2px的邊框。

複製程式碼 程式碼如下:

$(function() {


$(function() {
a").click(function(event) {
        alert("Current mouse position:" event.pageX "," event.pageY);
   false; //阻止連結跳到
    });

})

7.event.which屬性

此方法的作用是在老鼠點選事件中取得到滑鼠的左、中、右鍵；在鍵盤事件中取得鍵盤的按鈕。 複製程式碼

程式碼如下:


$(function() {


$(function() {

body").mousedown(function(e) {
        alert(e.which); //1 = 滑鼠左鍵；2 = 滑鼠中鍵；3 = 滑鼠右鍵。    })

})})

以上程式碼載入到頁面中，用滑鼠點選頁面時，點選左、中、右鍵分別返回1、2、3.

8.event.metaKey屬性

針對不同瀏覽器對鍵盤中的按鍵解釋不同，jQuery也進行了封裝，並規定event.metaKey()方法為鍵盤事件中取得按鍵。 9.event.originalEvent屬性。 此方法的作用是指向原始的事件物件。