jquery 事件對象屬性小結(jié)

更新時間：2010年04月27日 18:47:13 作者：

JQuery事件中的Event屬性是經(jīng)常性的被忽略的。大多數(shù)時間你的確不怎么用它，但有些時候它還是它還是很有作用的。

使用事件自然少不了事件對象. 因為不同瀏覽器之間事件對象的獲取, 以及事件對象的屬性都有差異, 導致我們很難跨瀏覽器使用事件對象.

jQuery中統(tǒng)一了事件對象, 當綁定事件處理函數(shù)時, 會將jQuery格式化后的事件對象作為唯一參數(shù)傳入:

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

關于event對象的詳細說明, 可以參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event

jQuery事件對象將不同瀏覽器的差異進行了合并, 比如可以在所有瀏覽器中通過 event.target 屬性來獲取事件的觸發(fā)者(在IE中使用原生的事件對象, 需要訪問event.srcElement).

下面是jQuery事件對象可以在擴瀏覽器支持的屬性:

屬性名稱	描述舉例
type	事件類型.如果使用一個事件處理函數(shù)來處理多個事件, 可以使用此屬性獲得事件類型,比如click. $("a").click(function(event) { alert(event.type); });
target	獲取事件觸發(fā)者DOM對象 $("a[href=http://google.com]").click(function(event) { alert(event.target.href); });
data	事件調(diào)用時傳入額外參數(shù). $("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); }); });
relatedTarget	對于鼠標事件, 標示觸發(fā)事件時離開或者進入的DOM元素 $("a").mouseout(function(event) { alert(event.relatedTarget); });
currentTarget	冒泡前的當前觸發(fā)事件的DOM對象, 等同于this. $("p").click(function(event) { alert( event.currentTarget.nodeName ); }); 結(jié)果:P
pageX/Y	鼠標事件中, 事件相對于頁面原點的水平/垂直坐標. $("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY ); });
result	上一個事件處理函數(shù)返回的值 $("p").click(function(event) { return "hey" }); $("p").click(function(event) { alert( event.result ); }); 結(jié)果:”hey”
timeStamp	事件發(fā)生時的時間戳. var last; $("p").click(function(event) { if( last ) alert( "time since last event " + event.timeStamp - last ); last = event.timeStamp; });

上面是jQuery官方文檔中提供的event對象的屬性. 在”jQuery實戰(zhàn)”一書中還提供了下面的多瀏覽器支持的屬性, 時間關系我沒有嘗試每一個屬性, 大家可以幫忙驗證是否在所有瀏覽器下可用:

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

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

名稱	說明舉例
preventDefault()	取消可能引起任何語意操作的事件. 比如<a>元素的href鏈接加載, 表單提交以及click引起復選框的狀態(tài)切換. $("a").click(function(event){ event.preventDefault(); // do something });
isDefaultPrevented()	是否調(diào)用過 preventDefault() 方法 $("a").click(function(event){ alert( event.isDefaultPrevented() ); event.preventDefault(); alert( event.isDefaultPrevented() ); });
stopPropagation()	取消事件冒泡 $("p").click(function(event){ event.stopPropagation(); // do something });
isPropagationStopped()	是否調(diào)用過 stopPropagation() 方法 $("p").click(function(event){ alert( event.isPropagationStopped() ); event.stopPropagation(); alert( event.isPropagationStopped() ); });
stopImmediatePropagation()	取消執(zhí)行其他的事件處理函數(shù)并取消事件冒泡.如果同一個事件綁定了多個事件處理函數(shù), 在其中一個事件處理函數(shù)中調(diào)用此方法后將不會繼續(xù)調(diào)用其他的事件處理函數(shù). $("p").click(function(event){ event.stopImmediatePropagation(); }); $("p").click(function(event){ // This function won't be executed });
isImmediatePropagationStopped()	是否調(diào)用過 stopImmediatePropagation() 方法 $("p").click(function(event){ alert( event.isImmediatePropagationStopped() ); event.stopImmediatePropagation(); alert( event.isImmediatePropagationStopped() ); });