首頁 > 開發者 > JavaScript
window.event對象
event代表事件的狀態，例如觸發event對象的元素、滑鼠的位置及狀態、按下的鍵等等。
event對象只在事件發生的過程中才有效。
event的某些屬性只對特定的事件有意義。比如，fromElement 和 toElement 屬性只對 onmouseover 和 onmouseout 事件有意義。 (詳細)
例子
下面的例子檢查滑鼠是否在連結上單擊，並且，如果shift鍵被按下，就取消連結的跳轉。
Java代碼下面的例子在狀態列上顯示滑鼠的當前位置。
Java代碼屬性：
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
--------------------------------------------------------------------------------
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 允許被上層元素的事件控制。這是預設值。
例子：
下面的代碼片斷示範了當在圖片上點擊（onclick）時，如果同時shift鍵也被按下，就取消上層元素（body）上的事件onclick所引發的showSrc()函數。
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 的值。
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
注釋：
這是個唯讀屬性。
例子：下面的代碼示範了當滑鼠移到按鈕上時，彈出一個對話方塊，顯示“mouse arrived”
Java代碼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
這是個唯讀屬性。這意味著，你只能通過它來得到滑鼠的當前位置，卻不能用它來更改滑鼠的位置。
========================
例子：
<script>
function fclick(obj) {
with(obj) {
alert(obj.style.posTop)
style.posTop = event.srcElement.offsetTop
var x = event.x - offsetWidth / 2
if (x < event.srcElement.offsetLeft) x = event.srcElement.offsetLeft
if (x > event.srcElement.offsetLeft + event.srcElement.offsetWidth - offsetWidth) x = event.srcElement.offsetLeft + event.srcElement.offsetWidth - offsetWidth
style.posLeft = x
}
}
function changeProp() {
form1.btnProp.value = "This is the new VALUE";
}
function changeCSSProp() {
form1.btnStyleProp.style.backgroundColor = "aqua";
}
</script>
<style>
input{border:1px solid #333333; width:200px;color:#666666;background:#eeeeee;font:normal
12px Tahoma;height:18px}
</style>
<body onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">
<form method="post" action="" id="form1" enctype="multipart/form-data">
<input id="f_file">
<input type="button" onMouseOver="fclick(t_file)" value="選擇上傳檔案">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;"
id="t_file" onChange="f_file.value=this.value" hidefocus>
<br>
<div style="width:250px; border:1px #F09 solid; height:30px;">
<input type="submit" value="提交" style=" position:absolute;" onMouseOver="alert(event.srcElement.offsetHeight+','+event.toElement.value)">
</div>
<INPUT TYPE=button ID=btnProp onClick="changeProp()" VALUE="Click to change the VALUE property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
<INPUT TYPE=button ID=btnStyleProp onclick="changeCSSProp()" VALUE="Click to change the CSS backgroundColor property of this button"
onpropertychange='alert(event.propertyName+" property has changed value")'>
</form>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
