Event Handler Attributes
2–3 MINS READ
HTML the event-handler attributes will allow you to specify JavaScript code that will execute when certain events occur and it is directly added to HTML elements. It is also linked to different event types such as clicks, mouse movements, key presses, and more.
Common event-handler Attributes
| Event | Description |
|---|---|
onclick | Get activated when the element in clicked. This is often used to act, like submitting a form or opening up a dialog. |
onmouseover | It activates when the mouse pointer is moved onto an element. It is used to change the style of any element, like highlighting a button on mouse over. |
onmouseout | Triggers when the mouse pointer is moved away from an element. This is for changing styles back or hiding elements that were displayed on a onmouseover. |
onchange | It triggers when we change value of any input element. We often use this with an input field a select menu or text area to takes some action when the user changes content value. |
onkeydown | Fires when a key is pressed down. This is a mechanism for keyboard shortcuts or validating input as the user types. |
onkeyup | It activates when key is released. Usually used in conjunction with onkeydown, which occurs throughout pressing a key down. |
onload | Triggers once the element (usually an image or whole page) has completed loading. This commonly used for initializing scripts or the execution of actions that should only run after the entire content has been loaded (like a redirect). |
onfocus | You can use onfocus to do something special when a control gains focus. For example, when the user clicks within a text control, you could implement an onfocus event handler to make the text control’s change to blue. |
Credits
This webpage was created based on lessons provided by Rose Anne G. Cochanco as part of Web Development subject.