- onload: It is triggered when the browser completes loading a page
- onchange: It is triggered when an HTML element changes.
- onclick: It is triggered when an HTML element is clicked.
- onmouseover: It is triggered when the mouse is moved over a HTML element.
- onmouseout: It is triggered when the mouse is moved out of a HTML element.
Using document.addEventListener() method
document.addEventListener(event, function, phase)
- event: Mandatory parameter. Specifies the name of the event.
- function: Mandatory parameter. Specifies the function that is supposed to handle the event.
- phase: This is an optional parameter and accepts a boolean value. If true value is passed then the event handler is executed in the capturing phase and if false value is passed then the event handler is executed in the bubbling phase. If an element is a child element and it triggers an event then the event is registered for both the parent and child element. If the phase value is passed as true then the event handler is first executed by the parent element (capturing phase) and if false is passed then the child element executes the event handler first. By default, false is passed as the phase value.
Trigger mouseover Event:
Trigger mouseout Event:
Trigger click Event:
Explanation: In this example, when the mouse is moved over the document the background color of the document changes to lavender. When the mouse is moved out the background color of the document changes back to white. And when the user clicks anywhere inside the document an alert pops up. These actions are handled by event handlers that is triggered when an event occurs.
Example 2: Triggering events on individual elements
Click on Button:
Mouse move over the page
Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML course.