對比Jquery封裝的event對象和JS原生event對象的使用

有些不是很準確，參考官網http://api.jquery.com/category/events/ 

屬性名稱	描述	舉例
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事件對象能夠在擴瀏覽器支持的屬性:

名稱	說明	舉例
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。爲精確計算結果，請在補白、邊框和填充

JQuery讀書筆記–Event屬性說明

JQuery事件中的Event屬性是常常性的被忽略的。大多數時間你的確不怎麼用它，但有些時候它仍是它仍是有做用的。如獲知觸發 
時用戶的環境（是否按了shift etc）。每一個瀏覽器對event都有不一樣的地方，Jquery對Event作了標準化因此能夠放心用。 
* 。target 這個反應觸發事件的DOM對象，能夠在事件冒泡的時候判斷是不是事件源頭(compare event.target to 
this) 
* .pageX: 鼠標的left屬性，相對於page 
* .pageY: 鼠標的top屬性，相對於page 
* preventDefault(): 這個方法被調用，則原有事件就被忽略。（例如 clicked link就不會去新的Url了） 
* stopPropagation():讓Jquery中止事件冒泡 
* .Data: 若是事件中還有EventData你就能夠用這個屬性得到對應Eventdata數據了。 
* ctrlKey: 類型: Boolean, 說明: Ctrl 鍵是否按下 
* shiftKey: 類型: Boolean, 說明: Shift鍵是否按下 
* altKey: 類型: Boolean, 說明: Alt 鍵是否按下 
* charCode: 類型: Number, 說明: 最後響應鍵盤按鍵的 charCode 值 
* keyCode: 類型: Number, 說明: 最後響應鍵盤按鍵的 keyCode 值 
* button: 類型: Number, 說明: 按下的鼠標鍵, 左鍵:1, 右鍵:2, 中鍵:4 
* which: 類型: Number, 說明: 最後響應的是哪一個按鍵, 若是是鍵盤按鍵則等於 charCode || keyCode; 若是是鼠標按 
鍵, 左鍵:1, 右鍵:3, 中鍵2 
type : 事件類型 
relatedTarget:對於鼠標事件, 標示觸發事件時離開或者進入的DOM元素 
currentTarget:冒泡前的當前觸發事件的DOM對象, 等同於this. 
result: 上一個事件處理函數返回的值 
screenX/Y:對於鼠標事件, 獲取事件相對於屏幕原點的水平/垂直座標

 

___________________________________________________________________________

 

在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對象有哪些屬性和方法