js中的event詳解

2021-07-25 21:15:17 字數 4119 閱讀 6331

event代表事件的狀態,例如觸發event物件的元素、滑鼠的位置及狀態、按下的鍵等等。

event物件只在事件發生的過程中才有效。

event的某些屬性只對特定的事件有意義。比如,fromelement 和 toelement 屬性只對 onmouseover 和 onmouseout 事件有意義。

event中的一些經常用到的屬性:

altkey, button, cancelbubble, clientx, clienty, ctrlkey, fromelement, keycode, offsetx, offsety, propertyname, returnvalue, screenx, pagex,pagey

screeny, shiftkey, srcelement, srcfilter, toelement, type, x, y,returnvalue

1.altkey

描述:檢查alt鍵的狀態。

語法:event.altkey

可能的值:

當alt鍵按下時,值為 true ,否則為 false 。唯讀。

2.button

描述:檢查按下的滑鼠鍵。

語法:event.button 可能的值:

0 沒按鍵

1 按左鍵

2 按右鍵

3 按左右鍵

4 按中間鍵

5 按左鍵和中間鍵

6 按右鍵和中間鍵

7 按所有的鍵

這個屬性僅用於onmousedown, onmouseup, 和 onmousemove 事件。對其他事件,不管滑鼠狀態如何,都返回 0(比如onclick)。

3.cancelbubble

描述:檢測是否接受上層元素的事件的控制。

語法:event.cancelbubble[ = cancelbubble]

可能的值:這是乙個可讀寫的布林值:true 不被上層原素的事件控制。false 允許被上層元素的事件控制。這是預設值。

4.clientx

描述:返回滑鼠在視窗客戶區域中的x座標。

語法:event.clientx

注釋:這是個唯讀屬性。這意味著,你只能通過它來得到滑鼠的當前位置,卻不能用它來更改滑鼠的位置。

5.clienty

描述:返回滑鼠在視窗客戶區域中的y座標。

語法:event.clienty

注釋:這是個唯讀屬性。這意味著,你只能通過它來得到滑鼠的當前位置,卻不能用它來更改滑鼠的位置。

6.ctrlkey

描述:檢查ctrl鍵的狀態。

語法:event.ctrlkey

可能的值:

當ctrl鍵按下時,值為 true ,否則為 false 。唯讀。

7.fromelement

描述:檢測 onmouseover 和 onmouseout 事件發生時,滑鼠所離開的元素。 參考:18.toelement

語法:event.fromelement

注釋:這是個唯讀屬性。

8.keycode

描述:檢測鍵盤事件相對應的內碼。

這個屬性用於 onkeydown, onkeyup, 和 onkeypress 事件。

語法:event.keycode[ = keycode]

可能的值:

這是個可讀寫的值,可以是任何乙個unicode鍵盤內碼。如果沒有引發鍵盤事件,則該值為 0 。

9.offsetx

描述:檢查相對於觸發事件的物件,滑鼠位置的水平座標

語法:event.offsetx

10.offsety

描述:檢查相對於觸發事件的物件,滑鼠位置的垂直座標

語法:event.offsety

11.propertyname

描述:設定或返回元素的變化了的屬性的名稱。

語法:event.propertyname [ = sproperty ]

可能的值:

sproperty 是乙個字串,指定或返回觸發事件的元素在事件中變化了的屬性的名稱。

這個屬性是可讀寫的。無預設值。

注釋:你可以通過使用 onpropertychange 事件,得到 propertyname 的值。

例子:下面的例子通過使用 onpropertychange 事件,彈出乙個對話方塊,顯示 propertyname 的值。

code

the event object property propertyname is

used here to return which property has been

altered.

value="click to change the value property of this button"

onpropertychange='alert(event.propertyname+" property has changed value")'>

οnclick="changecssprop()"

value="click to change the css backgroundcolor property of this button"

onpropertychange='alert(event.propertyname+" property has changed value")'>

12.returnvalue

描述:設定或檢查從事件中返回的值

語法:event.returnvalue[ = boolean]

可能的值:

true 事件中的值被返回

false 源物件上事件的預設操作被取消

13.screenx

描述:檢測滑鼠相對於使用者螢幕的水平位置

語法:event.screenx

注釋:這是個唯讀屬性。這意味著,你只能通過它來得到滑鼠的當前位置,卻不能用它來更改滑鼠的位置。

14.screeny

描述:檢測滑鼠相對於使用者螢幕的垂直位置

語法:event.screeny

注釋:這是個唯讀屬性。這意味著,你只能通過它來得到滑鼠的當前位置,卻不能用它來更改滑鼠的位置。

15.shiftkey

描述:檢查shift鍵的狀態。

語法:event.shiftkey

可能的值:

當shift鍵按下時,值為 true ,否則為 false 。唯讀。

16.srcelement

描述:返回觸發事件的元素。

語法:event.srcelement

17.srcfilter

描述:返回觸發 onfilterchange 事件的濾鏡。唯讀。

語法:event.srcfilter

18.toelement

描述:檢測 onmouseover 和 onmouseout 事件發生時,滑鼠所進入的元素。 參考:7.fromelement

語法:event.toelement

注釋:這是個唯讀屬性。

19.type

描述:返回事件名。

語法:event.type

注釋:返回沒有「on」作為字首的事件名,比如,onclick事件返回的type是click

唯讀。20. x

描述:返回滑鼠相對於css屬性中有position屬性的上級元素的x軸座標。如果沒有css屬性中有position屬性的上級元素,預設以body元素作為參考物件。

語法:event.x

注釋:如果事件觸發後,滑鼠移出視窗外,則返回的值為 -1

這是個唯讀屬性。這意味著,你只能通過它來得到滑鼠的當前位置,卻不能用它來更改滑鼠的位置。

21. y

描述:返回滑鼠相對於css屬性中有position屬性的上級元素的y軸座標。如果沒有css屬性中有position屬性的上級元素,預設以body元素作為參考物件。

語法:event.y

注釋:如果事件觸發後,滑鼠移出視窗外,則返回的值為 -1

這是個唯讀屬性。這意味著,你只能通過它來得到滑鼠的當前位置,卻不能用它來更改滑鼠的位置

22. target:target 事件屬性可返回事件的目標節點(觸發該事件的節點),如生成事件的元素、文件或視窗。

語法event.target

23. pagex:event.pagex 屬性返回滑鼠指標的位置,相對於文件的左邊緣。pagey:event.pagey屬性返回滑鼠指標的位置,相對於文件的頂部邊緣。

JS中的event 物件詳解

event屬性和方法 1.type 事件的型別,如onlick中的click 2.srcelement target 事件源,就是發生事件的元素 3.button 宣告被按下的滑鼠鍵,整數,1代表左鍵,2代表右鍵,4代表中鍵,如果按下多個鍵,酒把這些值加起來,所以3就代表左右鍵同時按下 firefo...

js 中的event物件

event代表事件的狀態,例如觸發event物件的元素 滑鼠的位置及狀態 按下的鍵等等。event物件只在事件發生的過程中才有效。event的某些屬性只對特定的事件有意義。比如,fromelement 和 toelement 屬性只對 onmouseover 和 onmouseout 事件有意義。e...

JS中的event物件

關於js中的event物件 1.任何事件觸發後將會產生乙個event物件 2.event物件記錄事件發生時的滑鼠位置,鍵盤按鍵狀態和觸發物件等資訊 獲得event物件 使用event物件獲得相關資訊,如單擊位置,觸發物件等 常用屬性 clientx clinty cancelbubble等 如何獲取...