JavaScript/jQuery中的Event

在JavaScript中，我們要常常用到Event對象來處理一些事件，但是IE和Firefox下Event對象的屬性是不同的。

1.keyCode||which||charCode

IE下支援keyCode，不支援which，charCode。

Firefox下支援keyCode，除功能鍵外，其他鍵值始終為0，Firefox下支援which和charCode屬性

2.event.srcElement||event.target

在IE下，event對象有srcElement屬性，沒有target屬性。在火狐下，event對象有target屬性，沒有srcElement屬性

3.event.x,event.y||event.pageX,event.pageY

IE下event對象有event.x,event.y屬性，而Firefox下沒有。Firefox下有event.pageX,event.PageY屬性，而IE下沒有。解決辦法：

var mx = event.x?event.x:event.pageX;

4.attachEvent()||addEventListener()

IE下支援attachEvent()方法，而Firefox下支援addEventListener()方法。

attachEvent("eventType",fun)

eventType是指事件類型,fun是指調用事件的函數

addEventListener("eventType",fun,flag)

addEventListener方法的前兩個參數和attachEvent方法一樣，flag參數則是一個 Boolean 值，指明該結點是否以DOM中所謂的捕捉模式來偵聽事件。對于一個典型的事件偵聽器來說，第三個參數應該為false（假）。

我所知道的常用的event屬性或方法就是上面那4條。上面的東西雖然不複雜，但是我會經常遺忘，jQuery則幫我們很好的解決了這些問題，我們通過jQuery無需再去判斷浏覽器是否支援某某屬性，某某方法。

首先看看jQuery對象有哪些屬性和方法

下面是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; });

名稱	說明	舉例
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來取消冒泡.

___________________________________________________________________________

offset()：擷取比對元素在目前視口的相對偏移。

傳回的對象包含兩個整形屬性：top 和 left。此方法隻對可見元素有效。

position()：擷取比對元素相對父元素的偏移。

傳回的對象包含兩個整形屬性：top 和 left。為精确計算結果，請在補白、邊框和填充。

繼續閱讀