Javascript Event object details and usage examples
- 2020-03-29 23:58:14
- OfStack
An Event represents the state of the Event, such as the element where the Event occurred, the state of the keyboard, the mouse position, and the state of the mouse button. Once an Event occurs, an Event object is generated, such as an Event object in the browser's memory when a button is clicked.
The event object is only valid during the event.
Some attributes of an event are only meaningful for specific events. For example, the fromElement and toElement properties are only meaningful for onmouseover and onmouseout events.
[event attribute] :
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 state of the Alt key.
Grammar: event. AltKey
Possible values:
When Alt is pressed, the value is TRUE, otherwise FALSE. Read-only.
2. The button
Description: check the pressed mouse key.
Grammar: event. The button
Possible values:
0 no buttons
1 according to the left
Right click 2
3. Press left and right
4 press the middle key
5 press left and middle keys
6. Press the right and middle keys
7 press all the keys
This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 is returned regardless of the state of the mouse (such as onclick).
3. The cancelBubble
Description: detects the control of events that accept or reject the upper element.
Grammar:
Event. CancelBubble [= cancelBubble]
Possible values:
This is a read-write Boolean value:
TRUE is not controlled by events in the upper element.
FALSE allows you to be controlled by the events of the upper element. This is the default.
Example:
The following code snippet demonstrates the showSrc() function that is thrown by canceling the onclick event on the upper element (body) if the shift key is also pressed when clicking (onclick) on the image.
4. ClientX
Description: returns the X coordinates of the mouse in the client area of the window.
Grammar: event. ClientX
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't 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.
Grammar: event. ClientY
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
6. CtrlKey
Description: check the status of the CTRL key.
Grammar: event. CtrlKey
Possible values:
The value is TRUE when the CTRL key is pressed, or FALSE otherwise. Read-only.
7. FromElement
Description: detects the element that the mouse leaves when the onmouseover and onmouseout events occur. Reference: 18) toElement
Grammar: event. FromElement
Note:
This is a read-only property.
8. KeyCode
Description: detect the corresponding internal code of keyboard events. This property is used for onkeydown, onkeyup, and onkeypress events.
Syntax: event.keycode [= keyCode]
Possible values:
This is a read-write value that can be any Unicode keyboard code. If no keyboard event is raised, the value is 0.
9. OffsetX
Description: checks the horizontal coordinates of the mouse position relative to the object that triggered the event
Grammar: event. OffsetX
10. OffsetY
Description: checks the vertical coordinates of the mouse position relative to the object that triggered the event
Grammar: event. OffsetY
11. PropertyName
Description: sets or returns the name of the changed attribute of the element.
Syntax: event.propertyname [= sProperty]
Possible values:
An sProperty is a string that specifies or returns the name of the property that the element that triggered the event changed in the event.
This property is read-write. There is no default value.
Note:
You can get the value of the propertyName by using the onpropertychange event.
Example:
The following example displays the value of the propertyName by using the onpropertychange event.
12. The returnValue
Description: sets or checks the value returned from the event
Syntax: event.returnvalue [= Boolean]
Possible values:
The value in the true event is returned
The default action for events on the false source object is canceled
13. ScreenX
Description: detects the horizontal position of the mouse relative to the user's screen
Grammar: event. ScreenX
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
14. ScreenY
Description: detects the vertical position of the mouse relative to the user's screen
Grammar: event. ScreenY
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
15. ShiftKey
Description: check the status of the shift key.
Grammar: event. ShiftKey
Possible values:
When the shift key is pressed, the value is TRUE, otherwise FALSE. Read-only.
16. SrcElement
Description: returns the element that triggered the event. Read-only. See the beginning of this article for an example.
Grammar: event. SrcElement
17. SrcFilter
Description: returns the filter that triggers the onfilterchange event. Read-only.
Grammar: event. SrcFilter
18. ToElement
Description: detects the element entered by the mouse when the onmouseover and onmouseout events occur.
Grammar: event. ToElement
Note:
This is a read-only property.
Example: the following code demonstrates that when the mouse moves over a button, a dialog box pops up showing "mouse arrived"
19. The type
Description: returns the event name.
Grammar: the event type
Note:
Returns the event name without the prefix "on"; for example, the type returned by the onclick event is click
Read-only.
X 20.
Description: returns the X-axis coordinates of the mouse relative to the parent element in the CSS property with the position attribute. If there is no parent element with the position attribute in the CSS attribute, the BODY element is used as the reference object by default.
Grammar: event. X
Note:
If the mouse moves out of the window after the event is triggered, the value returned is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
21. Y
Description: returns the Y-axis coordinates of the mouse relative to the parent element in the CSS property with the position attribute. If there is no parent element with the position attribute in the CSS attribute, the BODY element is used as the reference object by default.
Grammar: event. Y
Note:
If the mouse moves out of the window after the event is triggered, the value returned is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
The event object is only valid during the event.
Some attributes of an event are only meaningful for specific events. For example, the fromElement and toElement properties are only meaningful for onmouseover and onmouseout events.
[event attribute] :
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 state of the Alt key.
Grammar: event. AltKey
Possible values:
When Alt is pressed, the value is TRUE, otherwise FALSE. Read-only.
2. The button
Description: check the pressed mouse key.
Grammar: event. The button
Possible values:
0 no buttons
1 according to the left
Right click 2
3. Press left and right
4 press the middle key
5 press left and middle keys
6. Press the right and middle keys
7 press all the keys
This property is only used for onmousedown, onmouseup, and onmousemove events. For other events, 0 is returned regardless of the state of the mouse (such as onclick).
3. The cancelBubble
Description: detects the control of events that accept or reject the upper element.
Grammar:
Event. CancelBubble [= cancelBubble]
Possible values:
This is a read-write Boolean value:
TRUE is not controlled by events in the upper element.
FALSE allows you to be controlled by the events of the upper element. This is the default.
Example:
The following code snippet demonstrates the showSrc() function that is thrown by canceling the onclick event on the upper element (body) if the shift key is also pressed when clicking (onclick) on the image.
<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
Description: returns the X coordinates of the mouse in the client area of the window.
Grammar: event. ClientX
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't 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.
Grammar: event. ClientY
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
6. CtrlKey
Description: check the status of the CTRL key.
Grammar: event. CtrlKey
Possible values:
The value is TRUE when the CTRL key is pressed, or FALSE otherwise. Read-only.
7. FromElement
Description: detects the element that the mouse leaves when the onmouseover and onmouseout events occur. Reference: 18) toElement
Grammar: event. FromElement
Note:
This is a read-only property.
8. KeyCode
Description: detect the corresponding internal code of keyboard events. This property is used for onkeydown, onkeyup, and onkeypress events.
Syntax: event.keycode [= keyCode]
Possible values:
This is a read-write value that can be any Unicode keyboard code. If no keyboard event is raised, the value is 0.
9. OffsetX
Description: checks the horizontal coordinates of the mouse position relative to the object that triggered the event
Grammar: event. OffsetX
10. OffsetY
Description: checks the vertical coordinates of the mouse position relative to the object that triggered the event
Grammar: event. OffsetY
11. PropertyName
Description: sets or returns the name of the changed attribute of the element.
Syntax: event.propertyname [= sProperty]
Possible values:
An sProperty is a string that specifies or returns the name of the property that the element that triggered the event changed in the event.
This property is read-write. There is no default value.
Note:
You can get the value of the propertyName by using the onpropertychange event.
Example:
The following example displays the value of the propertyName by using the onpropertychange event.
<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. The returnValue
Description: sets or checks the value returned from the event
Syntax: event.returnvalue [= Boolean]
Possible values:
The value in the true event is returned
The default action for events on the false source object is canceled
13. ScreenX
Description: detects the horizontal position of the mouse relative to the user's screen
Grammar: event. ScreenX
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
14. ScreenY
Description: detects the vertical position of the mouse relative to the user's screen
Grammar: event. ScreenY
Note:
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
15. ShiftKey
Description: check the status of the shift key.
Grammar: event. ShiftKey
Possible values:
When the shift key is pressed, the value is TRUE, otherwise FALSE. Read-only.
16. SrcElement
Description: returns the element that triggered the event. Read-only. See the beginning of this article for an example.
Grammar: event. SrcElement
17. SrcFilter
Description: returns the filter that triggers the onfilterchange event. Read-only.
Grammar: event. SrcFilter
18. ToElement
Description: detects the element entered by the mouse when the onmouseover and onmouseout events occur.
Grammar: event. ToElement
Note:
This is a read-only property.
Example: the following code demonstrates that when the mouse moves over a button, a dialog box pops up showing "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. The type
Description: returns the event name.
Grammar: the event type
Note:
Returns the event name without the prefix "on"; for example, the type returned by the onclick event is click
Read-only.
X 20.
Description: returns the X-axis coordinates of the mouse relative to the parent element in the CSS property with the position attribute. If there is no parent element with the position attribute in the CSS attribute, the BODY element is used as the reference object by default.
Grammar: event. X
Note:
If the mouse moves out of the window after the event is triggered, the value returned is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.
21. Y
Description: returns the Y-axis coordinates of the mouse relative to the parent element in the CSS property with the position attribute. If there is no parent element with the position attribute in the CSS attribute, the BODY element is used as the reference object by default.
Grammar: event. Y
Note:
If the mouse moves out of the window after the event is triggered, the value returned is -1
This is a read-only property. This means that you can only use it to get the current position of the mouse, but you can't use it to change the position of the mouse.