Js的event對象用來描述Js的事件,它主要作用于IE和NN4(Netscape Navigator4)以后的各個瀏覽器版本中。event對象代表事件狀態(tài)腺怯,如事件發(fā)生的元素、鍵盤狀態(tài)、鼠標位置和鼠標按鈕狀態(tài)氓侧。一旦事件發(fā)生,便會生成event對象导狡,如單擊一個按鈕约巷,瀏覽器的內存中就產生相應的event對象。
1.在IE中引用event對象
在IE中旱捧,event對象被作為window對象屬性訪問:
window.event
由于window引用部分是可選的独郎,因此腳本像全局引用一樣對待event對象:
event.propertyName
這樣,一個事件處理程序的任何語句在不進行特殊處理和初始化的情況下枚赡,都可以訪問event對象氓癌。
2.在W3C中引用event對象
在W3C事件模型中,event對象引用比較復雜贫橙。在多數(shù)情況下贪婉,必須明確地將event對象作為一個參數(shù)傳遞到時間處理函數(shù)中。event對象有時可自動作為參數(shù)傳遞卢肃,這依賴于事件處理函數(shù)如何與對象綁定疲迂。
如果使用原始的方法將事件處理函數(shù)與對象綁定(通過元素標記的一個屬性),則必須把event對象作為參數(shù)傳遞莫湘。例如:
onKeyUp=“example(event)”
這是W3C模型中唯一像全局引用一樣明確引用event對象的方式尤蒿,這個引用只作為事件處理函數(shù)的參數(shù),在別的內容中不起作用幅垮。如果有多個參數(shù)腰池,則event對象引用可以以任意順序排列,例如:
onKeyUp=“example(this,event)”
與元素綁定的函數(shù)定義應該有一個參數(shù)變量來“捕獲event對象參數(shù):
function example(widget,evt){…}
這個參數(shù)變量名稱沒有任何限制忙芒,例子中示弓,使用event對象或evt。在跨瀏覽器的腳本中使用呵萨,應避免使用event作為參數(shù)變量名奏属,以避免與IE的event屬性沖突。
還可以通過其他方式將事件處理函數(shù)綁定到對象(在NN6+中甘桑,使用屬性賦值和W3C DOM的addEventListener()方法)拍皮,將這些事件處理函數(shù)的引用賦給文檔中所需的對象歹叮。例如:
document.forms[0].someButton.onKeyUp=example;
document.getElementById('myButton').addEventListener("KeyUp",example,false);
通過這些方式進行事件綁定可以防止自己的參數(shù)直接到達調用的函數(shù)。但是铆帽,W3C瀏覽器自動傳送event對象的引用并將它作為唯一參數(shù)咆耿,這個event對象是為響應激活事件的用戶或系統(tǒng)行為而創(chuàng)建的。也就是說爹橱,函數(shù)需要用一個參數(shù)變量來拒收傳遞的event對象:
function example(evt){…}
事件對象包含作為事件目標的對象(例如萨螺,包含表單控件對象的表單對象)的引用,從而可以訪問該對象的任何屬性愧驱。
3慰技、event對象的屬性
(1)altLeft屬性
該屬性設置或獲取左Alt鍵的狀態(tài)。檢索左Alt鍵的當前狀態(tài)组砚,返回值true表示關閉吻商,false為不關閉。
語法:
[window.]event.altLeft
由于altLeft屬性是Boolean值糟红,因此可以將該屬性應用到if語句中艾帐,根據(jù)獲取的值不同而執(zhí)行不同的操作。
(2)ctrlLeft屬性
該屬性設置或獲取左Ctrl鍵的狀態(tài)盆偿。檢索左Ctrl鍵的當前狀態(tài)柒爸,返回值true表示關閉,false為不關閉事扭。
語法:
[window.]event.ctrlLeft
由于ctrlLeft屬性是Boolean值捎稚,因此可以將該屬性應用到if語句中,根據(jù)獲取的值不同而執(zhí)行不同的操作求橄。
(3)shiftLeft屬性
該屬性設置或獲取左Shift鍵的狀態(tài)。檢索Shift鍵的當前狀態(tài)谈撒,返回值true表示關閉腥泥,false為不關閉。
語法:
[window.]event.shiftLeft
由于shiftLeft屬性是Boolean值蛆楞,因此可以將該屬性應用到if語句中豹爹,根據(jù)獲取的值不同而執(zhí)行不同的操作臂聋。
由于這3個屬性的值都是Boolean類型的,所以可以將它們組合成一個條件在if語句中應用采够,并且也可以和altKey蹬癌、ctrlKey和shiftKey屬性同時使用。
例:將altKey虹茶、ctrlKey和shiftKey屬性進行組合逝薪,組合成一個綜合的條件,應用if語句判斷當Ctrl鍵蝴罪、shift鍵和Alt鍵同時按下是執(zhí)行一個操作董济。
代碼如下:
<script>
function example(){ //創(chuàng)建自定義函數(shù)
//應用if語句判斷Ctrl鍵、shift鍵和Alt鍵是否同時被按下
if(window.event.ctrlKey && window.event.altKey && window.event.shiftKey){
//如果Ctrl鍵要门、Shift鍵和Alt鍵同時按下感局,則執(zhí)行下面的內容
alert('Ctrl鍵、Shift鍵和Alt鍵同時按下啦!')
}
}
document.onkeydown = example;
</script>
(4)botton屬性
該屬性設置或獲取事件發(fā)生時用戶所按的鼠標鍵暂衡。
語法:
[window.]event.button
該屬性的值如表所示询微。
值 | 說明 | 值 | 說明 |
---|---|---|---|
0 | 表示沒有按鍵 | 4 | 按下中間鍵 |
1 | 按下左鍵(主鍵) | 5 | 同時按下左鍵和中間鍵 |
2 | 按下右鍵 | 6 | 同時按下右鍵和中間鍵 |
3 | 同時按下左鍵和右鍵 | 7 | 同時按下左鍵、中間鍵和右鍵 |
當用戶按下多個鍵時狂巢,每次按鍵都激活一個onmousedown事件撑毛。如果用戶首先按下左鍵,則onmousedown事件激活唧领,event.button屬性值為1藻雌;如果此時按下右鍵,那么onmousedown事件再次發(fā)生斩个,但event.button屬性值為3胯杭。如果腳本同時按下兩個按鍵執(zhí)行特殊動作,那么就應該忽略單一按鍵動作受啥,因為在處理過程中很可能激活單鍵事件做个,從而干擾目標行為。
button屬性僅用于onmousedown滚局、onmouseup和onmousemove事件居暖。對于其他事件,無論鼠標狀態(tài)如何藤肢,都返回0(如onclick)太闺;
例子:在頁面中的任何位置單擊鼠標右鍵都彈窗“你點擊右鍵了”的對話框,單擊“確定”按鈕后將進入到明日科技網(wǎng)站的首頁嘁圈。代碼如下:
<script>
function gosite(){
if(event.button == 2){
alert('你點擊右鍵了');
window.open('http://www.baidu.com/');
return false;
}
}
document.onmousedown = gosite;
</script>
(5)clientX屬性
該屬性獲取鼠標在瀏覽器窗口中的X坐標省骂,它是一個只讀屬性蟀淮,即只能獲取鼠標的當前位置,不能改變鼠標的位置钞澳。
語法:
[window.]event.clientX
(6)clientY屬性
該屬性獲取鼠標在瀏覽器窗口中的Y坐標怠惶,它是一個只讀屬性,即只能獲取鼠標的當前位置略贮,不能改變鼠標的位置甚疟。
語法:
[window.]event.clientY
(7)X屬性
該屬性設置或獲取鼠標指針位置相對于css屬性中有position屬性的上級元素的X軸坐標。如果css屬性中沒有position屬性的上級元素逃延,默認以body元素作為參考對象览妖。
語法:
[window.]event.X
如果鼠標事件觸發(fā)后,鼠標移出窗口外揽祥,則返回的值為-1讽膏。這是個只讀屬性,只能通過它獲取鼠標的當前位置拄丰,但不能用它來更改鼠標的位置府树。
(8)Y屬性
該屬性設置或獲取鼠標指針位置相對于css屬性中有position屬性的上級元素的Y軸坐標。如果css屬性中沒有position屬性的上級元素料按,默認以body元素作為參考對象奄侠。
語法:
[window.]event.Y
如果鼠標事件觸發(fā)后,鼠標移出窗口外载矿,則返回的值為-1垄潮。這是個只讀屬性,只能通過它獲取鼠標的當前位置闷盔,但不能用它來更改鼠標的位置弯洗。
(9)cancelBubble屬性
該屬性檢測是否接受上層元素的事件的控制。如果該屬性的值是false逢勾,則允許被上層元素的事件控制牡整;否則值為true,則不被上層元素的事件控制溺拱。
語法:
[window.]event.cancelBubble[=cancelBubble]
(10)srcElement屬性
該屬性設置或獲取觸發(fā)事件的對象逃贝。srcElement屬性是事件初始目標的HTML元素對象引用。由于事件通過元素容器層次進行處理盟迟,且可以在任何一個層次進行處理秋泳,因此由一個屬性指向產生初始事件的元素是很有幫助的。
語法:
[window.]event.srcElement
通過該屬性可以讀攒菠、寫屬于該元素的屬性,并調用它的任何方法歉闰。