使用事件自然少不了事件對象. 因為不同浏覽器之間事件對象的獲取, 以及事件對象的屬性都有差異, 導致我們很難跨浏覽器使用事件對象.
jQuery中統一了事件對象, 當綁定事件處理函數時, 會將jQuery格式化後的事件對象作為唯一參數傳入:
$("#testDiv").bind("click", function(event) { });
關於event對象的詳細說明, 可以參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event
jQuery事件對象將不同浏覽器的差異進行了合並, 比如可以在所有浏覽器中通過 event.target 屬性來獲取事件的觸發者(在IE中使用原生的事件對象, 需要訪問event.srcElement).
下面是jQuery事件對象可以在擴浏覽器支持的屬性:
$("a").click(function(event) {
alert(event.type);
});
target
獲取事件觸發者DOM對象 $("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元素 $("a").mouseout(function(event) {
alert(event.relatedTarget);
});
currentTarget
冒泡前的當前觸發事件的DOM對象, 等同於this. $("p").click(function(event) {
alert( event.currentTarget.nodeName );
});
結果:P
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來取消冒泡.