js事件物件event

2022-09-15 00:48:19 字數 2039 閱讀 2391

js的事件物件 即我們函式中經常會用到的 event

event 物件代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、滑鼠的位置、滑鼠按鈕的狀態。

事件通常與函式結合使用,函式不會在事件發生前被執行!

通常我們用得比較多的 就是在標籤上 寫onclick="fn()"

屬性 描述

altkey

返回當事件被觸發時,"alt" 是否被按下。

button

返回當事件被觸發時,哪個滑鼠按鈕被點選。

clientx

返回當事件被觸發時,滑鼠指標的水平座標。

clienty

返回當事件被觸發時,滑鼠指標的垂直座標。

ctrlkey

返回當事件被觸發時,"ctrl" 鍵是否被按下。

metakey

返回當事件被觸發時,"meta" 鍵是否被按下。

relatedtarget

返回與事件的目標節點相關的節點。

screenx

返回當某個事件被觸發時,滑鼠指標的水平座標。

screeny

返回當某個事件被觸發時,滑鼠指標的垂直座標。

shiftkey

返回當事件被觸發時,"shift" 鍵是否被按下。

除了上面的滑鼠/事件屬性,ie 瀏覽器還支援下面的屬性:

屬性描述

cancelbubble

如果事件控制代碼想阻止事件傳播到包容物件,必須把該屬性設為 true。

fromelement

對於 mouseover 和 mouseout 事件,fromelement 引用移出滑鼠的元素。

keycode

對於 keypress 事件,該屬性宣告了被敲擊的鍵生成的 unicode 字元碼。對於 keydown 和 keyup 事件,它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。

offsetx,offsety

發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。

returnvalue

如果設定了該屬性,它的值比事件控制代碼的返回值優先順序高。把這個屬性設定為 fasle,可以取消發生事件的源元素的預設動作。

srcelement

對於生成事件的 window 物件、document 物件或 element 物件的引用。

toelement

對於 mouseover 和 mouseout 事件,該屬性引用移入滑鼠的元素。

x,y事件發生的位置的 x 座標和 y 座標,它們相對於用css動態定位的最內層包容元素。

通常 我們以下幾個情況會用到 事件物件event

首先我們得獲取事件物件,在ie中 因為事件物件是全域性的所以我們可以直接 在函式中獲取:

var e = window.event; //

該獲取方法在谷歌瀏覽器中也有效果

但是在火狐中 event 不能通過這種方式獲取

火狐只能通過顯示的傳入引數才能取到事件物件 如:

上述例子在各個瀏覽器都可以相容到

情況一 :事件冒泡處理 

事件冒泡就是 子級會觸發 父級的事件 為了避免 觸發到父級的事件 就必須阻止事件的冒泡行為 示例**

if

(e.stoppropagation)

else

if (window.event)

情況二:獲取事件觸發的物件

有一種情況比較常見的就是點選空白處隱藏,

該功能的實現 就要通過 event 去判斷點選的區域 是否在指定的物件內  event.target  返回的是觸發事件的dom

**如下:

$(document).bind("click",function

(e)})

情況三:一些需要獲取滑鼠實時位置方法

如:移動彈出層的功能 就必須在移動的時候 實時獲取到滑鼠的位置

**如下:

$(document).on('mousemove',function

(e));

JS事件物件event

事件物件 事件引數物件,event物件 1,什麼是事件物件 任何乙個事件觸發後都會包含乙個event物件 event物件中包含與當前事件相關的一些屬性和方法。2,獲取event物件 1,在html中繫結事件 標記 on事件名 btn event eg function btn event 注意 1,...

js 事件物件event

在觸發dom上的某個事件時,會產生乙個事件物件event。這個物件中包含著所有與事件有關的資訊。包括導致事件的元素,事件的型別以及其他與特定事件相關的資訊。我是div div class son son div div script varbox document.queryselector box...

js 事件物件 event 事件委託

div.onclick function event event.target 火狐只有這個 event.srcelement ie只有這個 這兩chrome都有 可以用來事件委託 理用事件冒泡,和事件源物件進行處理 優點效能 不需要迴圈所有的元素乙個個繫結事件 靈活 當有新的子元素時不需要重新繫結...