使用事件自然少不了事件對象. 因為不同瀏覽器之間事件對象的獲取, 以及事件對象的屬性都有差異, 導致我們很難跨瀏覽器使用事件對象.
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; }); |
