jquery 事件物件屬性小結

Web開發者發表於2011-12-26
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. 
$("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來取消冒泡。

相關文件：jQuery 實現 Ctrl+Enter 快捷鍵發表評論

相關文章