Mar 29, 2020

Javascript Event object details and usage examples

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.


<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.