DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery.event兼容各浏覽器的event詳細解析
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); //獲取觸發事件的<a>元素的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() {
    $("a").click(function(event) {
        alert("Current mouse position:" + event.pageX + "," + event.pageY);
        //獲取鼠標當前相對於頁面的坐標
        return false; //阻止鏈接跳轉
    });
})

7.event.which屬性
該方法的作用是在鼠標單擊事件中獲取到鼠標的左、中、右鍵;在鍵盤事件中獲取鍵盤的按鈕。
. 代碼如下:
$(function() {
    $("body").mousedown(function(e) {
        alert(e.which); //1 = 鼠標左鍵;2 = 鼠標中鍵;3 = 鼠標右鍵。
    })
})

以上代碼加載到頁面中,用鼠標單擊頁面時,單擊左、中、右鍵分別返回1、2、3.

8.event.metaKey屬性
針對不同浏覽器對鍵盤中的<ctrl>按鍵解釋不同,jQuery也進行了封裝,並規定event.metaKey()方法為鍵盤事件中獲取<ctrl>按鍵。

9.event.originalEvent屬性。
該方法的作用是指向原始的事件對象。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved