The event object is only valid during the event. Some properties of event are only meaningful for specific events. For example, the fromElement and toElement properties are only meaningful for onmouseover and onmouseout events. Example The following example checks whether the mouse is clicked on a link and, if the shift key is pressed, cancels the link jump.
Cancels Links
< BODY onclick= "cancelLink()"> [/code] The following example displays the current position of the mouse on the status bar. < BODY onmousemove="window.status = 'X=' window.event.x ' Y=' window.event.y"> Properties: altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnvalue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
1.altKey Description: Check the status of the alt key. Syntax: event.altKey Possible values: The value is TRUE when the alt key is pressed, FALSE otherwise. Read only. 2.button Description: Check the pressed mouse button. Syntax: event.button Possible values: 0 No button pressed 1 Press the left button 2 Press the right button 3 Press the left button 4 Press the middle button 5 Press Left and middle keys 6 Press right and middle keys 7 Press all keys This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 is returned regardless of the mouse state (such as onclick). 3.cancelBubble Description: Detects whether to accept the event control of the upper element. Syntax: event.cancelBubble[ = cancelBubble] Possible values: This is a readable and writable Boolean value: TRUE Not controlled by events on the upper element. FALSE allows to be controlled by events of upper element. This is the default value. Example: The following code snippet demonstrates that when clicking on the image (onclick), if the shift key is also pressed at the same time, the showSrc() function triggered by the onclick event on the upper element (body) is canceled. < ;BODY onclick="showSrc()">
4.clientX Description: Return the mouse position The X coordinate in the client area of the window. Syntax: event.clientX Comments: This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse. 5.clientY Description: Returns the Y coordinate of the mouse in the client area of the window. Syntax: event.clientY Comments: This is a read-only property. This means that you can only use it to get the current position of the mouse, but you cannot use it to change the position of the mouse. 6.ctrlKey Description: Check the status of the ctrl key. Syntax: event.ctrlKey Possible values: When the ctrl key is pressed, the value is TRUE, otherwise it is FALSE. Read only. 7.fromElement Description: Detect the element that the mouse leaves when the onmouseover and onmouseout events occur. Reference: 18.toElement Syntax: event.fromElement Comments: This is a read-only property. 8.keyCode Description: Detect the internal code corresponding to keyboard events. This attribute is used for onkeydown, onkeyup, and onkeypress events. Syntax: event.keyCode[ = keyCode] Possible values: This is a readable and writable value and can be any Unicode keyboard internal code. If no keyboard event was raised, the value is 0 . 9.offsetX Description: Check the horizontal coordinate of the mouse position relative to the object that triggered the event Syntax: event.offsetX 10.offsetY Description: Check Relative to the object that triggered the event, the vertical coordinate of the mouse position Syntax: event.offsetY 11.propertyName Description: Set or return the name of the changed property of the element. Syntax: event.propertyName [ = sProperty ] Possible values: sProperty is a string that specifies or returns the name of the property that changed in the event on the element that triggered the event. This property is readable and writable. No default value. Note: You can get the value of propertyName by using onpropertychange event. Example: The following example uses the onpropertychange event to pop up a dialog box to display the value of propertyName.
<SCRIPT> <br>function changeProp() <br>{ <br>btnProp.value = "This is the new value"; <br>} function changeCSSProp() <br>{ <br>btnStyleProp.style.backgroundColor = "aqua"; <br>} <br></SCRIPT>
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")'> onclick="changeCSSProp()" value="Click to change the CSS backgroundColor property of this button" onpropertychange='alert(event.propertyName " property has changed value")'>
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn