HTML DOM Event Object Examples JavaScript (JS)
Button Object Examples: HTML DOM Event Object Examples – Javascript JS
Purpose: – Illustrates the JavaScript syntax for working with the Event Object. The Event object allows you to access properties related to events
Event Object Examples
| Event Handlers | |
| onabort | Event happens when loading of image is interrupted. |
| onblur | Event happens when an element loses focus. |
| onchange | Event happens when the content of a field is altered. |
| onclick | Event happens when mouse clicks an object. |
| ondblclick | Event happens when mouse double-clicks an object. |
| onerror | Event happens when an error occurs. |
| onfocus | Event happens when an element gains focus. |
| onkeydown | Event happens when a key is pressed. |
| onkeypress | Event happens when key is held down or pressed. |
| onkeyup | Event happens when key is released. |
| onload | Event happens when an image or page has finished loading. |
| onmousedown | Event happens when a mouse button is pressed. |
| onmousemove | Event happens when mouse is moved. |
| onmouseout | Event happens when mouse is moved off an element. |
| onmouseover | Event happens when mouse is moved over an object. |
| onmouseup | Event happens when mouse button is released. |
| onreset | Event happens when a reset button is clicked. |
| onresize | Event happens when a frame or window is resized. |
| onselect | Event happens when text is selected. |
| onsubmit | Event happens when submit button is clicked. |
| onunload | Event happens when person leaves page. |
| Mouse/Keyboard Attributes | |
| altKey | Allows access to whether the alt key was pressed. |
| button | Allows you to access which mouse button was pressed. |
| clientx | Allows you to access the horizontal coordinate of the mouse when event was triggered. |
| clienty | Allows you to access the vertical coordinate of the mouse when event was triggered. |
| ctrlKey | Allows you to access whether the control key was pressed. |
| metaKey | Allows you to access whether the meta key was pressed |
| relatedTarget | Allows you to access the element related to the element that triggered the event. |
| screenx | Allows you to access the horizontal coordinate of the mouse pointer when the event happened. |
| screeny | Allows you to access the vertical coordinate of the mouse pointer when the event happened. |
| shiftKey | Allows you to access the whether the shift key was pressed. |
| Other Event Attributes | |
| bubbles | Allows access to boolean value that indicates whether event is bubbling event. |
| cancelable | Allows you to access boolean value that shows whether event can prevent default action. |
| currentTarget | Allows you to access the element whose event listeners triggered the event. |
| eventPhase | Allows you to access to which phase of the event flow is being evaluated. |
| target | Allows you to access to element that triggered event. |
| timeStamp | Allows you to access to the timestamp in milliseconds from system start or event trigger. |
| type | Allows you to access the name of the event. |
| screenx | Allows you to access the horizontal coordinate of the mouse pointer when the event happened. |
| screeny | Allows you to access the vertical coordinate of the mouse pointer when the event happened. |
| shiftKey | Allows you to access the whether the shift key was pressed. |
