jquery 事件對象屬性小結

使用事件天然少不了事件對象. 由於不一樣瀏覽器之間事件對象的獲取, 以及事件對象的屬性都有差別, 致使咱們很難跨瀏覽器使用事件對象. node

jQuery中統一了事件對象, 當綁定事件處理函數時, 會將jQuery格式化後的事件對象做爲惟一參數傳入: jquery


$("#testDiv").bind("click", function(event) { });

關於event對象的詳細說明, 能夠參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event 瀏覽器

jQuery事件對象將不一樣瀏覽器的差別進行了合併, 好比能夠在全部瀏覽器中經過 event.target 屬性來獲取事件的觸發者(在IE中使用原生的事件對象, 須要訪問event.srcElement). 函數



  • 下面是jQuery事件對象能夠在擴瀏覽器支持的屬性:


屬性名稱 描述舉例
type

事件類型.若是使用一個事件處理函數來處理多個事件, 可使用此屬性得到事件類型,好比click this


$("a").click(function(event) { 
    alert(event.type); 
});


target

獲取事件觸發者DOM對 google

$("a[href=http://google.com]").click(function(event) { 
  alert(event.target.href); 
});


data

事件調用時傳入額外參數 編碼


$("a").each(function(i) { 
   $(this).bind('click', {index:i}, function(e){ 
      alert('my index is ' + e.data.index); 
   }); 
});


relatedTarget

對於鼠標事件, 標示觸發事件時離開或者進入的DOM元 spa

$("a").mouseout(function(event) { 
    alert(event.relatedTarget); 
});


currentTarget

冒泡前的當前觸發事件的DOM對象, 等同於this. code

$("p").click(function(event) { 
     alert( event.currentTarget.nodeName ); 
});


結果:P orm

pageX/Y

鼠標事件中, 事件相對於頁面原點的水平/垂直座標.

$("a").click(function(event) { 
    alert("Current mouse position: " + event.pageX + ", " + event.pageY ); 
});


result

上一個事件處理函數返回的

$("p").click(function(event) { 
    return "hey" 
}); 
$("p").click(function(event) { 
    alert( event.result ); 
});


結果:」hey」

timeStamp

事件發生時的時間戳.

var last; 
$("p").click(function(event) { 
    if( last ) 
        alert( "time since last event " + event.timeStamp - last ); 
    last = event.timeStamp; 
});



上面是jQuery官方文檔中提供的event對象的屬性. 在」jQuery實戰」一書中還提供了下面的多瀏覽器支持的屬性, 時間關係我沒有嘗試每個屬性, 你們能夠幫忙驗證是否在全部瀏覽器下可用:

屬性名稱 描述
altKey Alt鍵是否被按下. 按下返回true
ctrlKey ctrl鍵是否被按下, 按下返回true
metaKey Meta鍵是否被按下, 按下返回true.
meta鍵就是PC機器的Ctrl鍵,或者Mac機器上面的Command鍵
shiftKey Shift鍵是否被按下, 按下返回true
keyCode 對於keyup和keydown事件返回被按下的鍵. 不區分大小寫, a和A都返回65.對於keypress事件請使用which屬性, 由於which屬性跨瀏覽時依然可靠.
which 對於鍵盤事件, 返回觸發事件的鍵的數字編碼. 對於鼠標事件, 返回鼠標按鍵號(1左,2中,3右).
screenX/Y 對於鼠標事件, 獲取事件相對於屏幕原點的水平/垂直座標

事件對象除了擁有屬性, 還擁有事件. 有一些是必定會用到的事件好比取消冒泡 stopPropagation() 等.下面是jQuery事件對象的函數列表:

名稱 說明舉例
preventDefault()

取消可能引發任何語意操做的事件. 好比<a>元素的href連接加載, 表單提交以及click引發複選框的狀態切換.

$("a").click(function(event){ 
    event.preventDefault(); 
    // do something 
});


isDefaultPrevented()

是否調用過preventDefault()

$("a").click(function(event){ 
    alert( event.isDefaultPrevented() ); 
    event.preventDefault(); 
    alert( event.isDefaultPrevented() ); 
});


stopPropagation() 取消事件冒泡
$("p").click(function(event){ 
    event.stopPropagation(); 
    // do something 
});
isPropagationStopped()

是否調用過stopPropagation()

$("p").click(function(event){ 
     alert( event.isPropagationStopped() ); 
     event.stopPropagation(); 
     alert( event.isPropagationStopped() ); 
});


stopImmediatePropagation()

取消執行其餘的事件處理函數並取消事件冒泡.若是同一個事件綁定了多個事件處理函數, 在其中一個事件處理函數中調用此方法後將不會繼續調用其餘的事件處理函數.

$("p").click(function(event){ 
    event.stopImmediatePropagation(); 
}); 
$("p").click(function(event){ 
    // This function won't be executed 
});


isImmediatePropagationStopped()

是否調用過stopImmediatePropagation()

$("p").click(function(event){ 
    alert( event.isImmediatePropagationStopped() ); 
    event.stopImmediatePropagation(); 
    alert( event.isImmediatePropagationStopped() ); 
});

這些函數中 stopPropagation() 是咱們最長用的也是必定會用到的函數. 至關於操做原始event對象的event.cancelBubble=true來取消冒泡。

相關文章
相關標籤/搜索