javascript event對象與 jquery event 解析

時間 2019-11-12

標籤 javascript event 對象 jquery 解析欄目 JavaScript 简体版

原文原文鏈接

描述css

event表明事件的狀態，例如觸發event對象的元素、鼠標的位置及狀態、按下的鍵等等。瀏覽器

event對象只在事件發生的過程當中纔有效。函數

event的某些屬性只對特定的事件有意義。好比，fromElement 和 toElement 屬性只對 onmouseover 和 onmouseout 事件有意義。this

例子code

下面的例子檢查鼠標是否在連接上單擊，而且，若是shift鍵被按下，就取消連接的跳轉。對象

<HTML>
<HEAD><TITLE>Cancels Links</TITLE>
<SCRIPT LANGUAGE="JScript">
    function cancelLink() {
        if (window.event.srcElement.tagName == "A" && window.event.shiftKey) 
        window.event.returnValue = false;
    }
</SCRIPT>
<BODY onclick="cancelLink()">

下面的例子在狀態欄上顯示鼠標的當前位置。seo

<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

屬性：事件

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y圖片

1.altKeyip

描述：檢查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()函數。

<SCRIPT LANGUAGE="JScript">
    function checkCancel() {
        if (window.event.shiftKey)
        window.event.cancelBubble = true;
    }
    function showSrc() {
        if (window.event.srcElement.tagName == "IMG")
        alert(window.event.srcElement.src);
    }
</SCRIPT>
<BODY onclick="showSrc()">
<IMG onclick="checkCancel()" SRC="sample.gif">

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 的值。

<HEAD>
<SCRIPT>
    function changeProp()
    {
        btnProp.value = "This is the new VALUE";
    }
    function changeCSSProp()
    {
        btnStyleProp.style.backgroundColor = "aqua";
    }
</SCRIPT>
</HEAD>
<BODY>
<P>The event object property propertyName is used here to return which property has been altered.</P>

<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")'>
</BODY>

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」

<SCRIPT>
    function testMouse(oObject) {
        if(oObject.contains(event.toElement)) {
        alert("mouse arrived");
    }
}
</SCRIPT>
:
<BUTTON ID=oButton onmouseover="testMouse(this)">Mouse Over This.</BUTTON>

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

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～