jquery 事件物件屬性小結

2021-09-08 17:08:26 字數 2895 閱讀 7713

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

jquery中統一了事件物件, 當繫結事件處理函式時, 會將jquery格式化後的事件物件作為唯一引數傳入:

$("#testdiv").bind("click", function(event) );
關於event物件的詳細說明, 可以參考jquery官方文件: 

jquery事件物件將不同瀏覽器的差異進行了合併, 比如可以在所有瀏覽器中通過 event.target 屬性來獲取事件的觸發者(在ie中使用原生的事件物件, 需要訪問event.srcelement).

下面是jquery事件物件可以在擴瀏覽器支援的屬性:

屬性名稱描述舉例

type

事件型別.如果使用乙個事件處理函式來處理多個事件, 可以使用此屬性獲得事件型別,比如click.

$("a").click(function(event) );

target

獲取事件觸發者dom物件

$("a[href=").click(function(event) );

data

事件呼叫時傳入額外引數.

$("a").each(function(i) , function(e)); 

});

relatedtarget

對於滑鼠事件, 標示觸發事件時離開或者進入的dom元素

$("a").mouseout(function(event) );

currenttarget

冒泡前的當前觸發事件的dom物件, 等同於this.

$("p").click(function(event) );
結果:p

pagex/y

滑鼠事件中, 事件相對於頁面原點的水平/垂直座標.

$("a").click(function(event) );

result

上乙個事件處理函式返回的值

$("p").click(function(event) ); 

$("p").click(function(event) );

結果:」hey」

timestamp

事件發生時的時間戳.

var last; 

$("p").click(function(event) );

上面是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()

取消可能引起任何語意操作的事件. 比如元素的href鏈結載入, 表單提交以及click引起核取方塊的狀態切換.

$("a").click(function(event));

isdefaultprevented()

是否呼叫過

preventdefault()

方法

$("a").click(function(event));

stoppropagation()

取消事件冒泡

$("p").click(function(event));

ispropagationstopped()

是否呼叫過

stoppropagation()

方法

$("p").click(function(event));

stopimmediatepropagation()

取消執行其他的事件處理函式並取消事件冒泡.如果同乙個事件繫結了多個事件處理函式, 在其中乙個事件處理函式中呼叫此方法後將不會繼續呼叫其他的事件處理函式.

$("p").click(function(event)); 

$("p").click(function(event));

isimmediatepropagationstopped()

是否呼叫過

stopimmediatepropagation()

方法

$("p").click(function(event));

這些函式中 stoppropagation() 是我們最長用的也是一定會用到的函式. 相當於操作原始event物件的event.cancelbubble=true來取消冒泡。

jquery事件物件屬性

jquery事件中的event屬性是經常性的被忽略的。大多數時間你的確不怎麼用它,但有些時候它還是它還是很有作用的。使用事件自然少不了事件物件.因為不同瀏覽器之間事件物件的獲取,以及事件物件的屬性都有差異,導致我們很難跨瀏覽器使用事件物件.jquery中統一了事件物件,當繫結事件處理函式時,會將jq...

jQuery 事件物件

jquery事件物件其實就是js事件物件的乙個封裝,處理了相容問題 傳入e,再console.log e 可以檢視 100,註冊的時候的時候,把100傳到事件裡面去。var money 100 on types,selector,data,callback 使用on方法的時候,可以給data引數傳乙...

jQuery事件物件event的屬性和方法

事件處理 事件物件 目標元素的獲取,事件物件的屬性 方法等 在不同瀏覽器之間存在差異,jquery在遵循w3c規範的情況下做了封裝統一 一 事件物件常用的屬性 a click function event a click function event this和event.target的區別 js中...