Capturing And Handling Events

Events can be captured and handled using the EventTarget interface, which is implemented by most DOM elements.

To capture an event, you first need to select the element that you want to capture events from. This can be done using various DOM selection methods such as document.getElementById() or document.querySelector(). Once you have selected the element, you can use the addEventListener() method to register a callback function that will be executed when the event occurs.

Example :

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="myButton">Click me!</button> <p id="myElement">Hover over me!</p> </body> <script> const myButton = document.getElementById("myButton"); myButton.addEventListener("click", function(event) { // Prevent the default behavior of the button event.preventDefault(); // Log a message to the console console.log("Button clicked!"); // Update the text of the button myButton.textContent = "Clicked!"; // Add a CSS class to the button myButton.classList.add("clicked"); // Trigger another function doSomethingElse(); }); function doSomethingElse() { // get the element with id "myElement" const myElement = document.getElementById("myElement"); // add an event listener for the "mouseover" event myElement.addEventListener("mouseover", function(event) { // change the background color to blue myElement.style.backgroundColor = "blue"; }); // add an event listener for the "mouseout" event myElement.addEventListener("mouseout", function(event) { // change the background color back to white myElement.style.backgroundColor = "white"; }); } // Do something else here </script> </html>

Output :

Explanation :

This code captures a click event on a button element with an id of “myButton” and registers a callback function that updates the text of the button, adds a CSS class to it, and triggers another function called doSomethingElse(). The doSomethingElse() function gets an element with an id of “myElement” and adds event listeners for the “mouseover” and “mouseout” events. When the user hovers over the element, the background color changes to blue, and when they move the mouse out of the element, the background color changes back to white.

There are many other types of events that can be captured and handled, such as “mouseover”, “keydown”, and “submit”. You can find a full list of events on the MDN Web Docs.

Note :

Event propagation refers to the way events “bubble” up the DOM tree from the target element to its ancestors.
By default, events will propagate up the tree until they reach the window object.
This can cause unexpected behavior if event listeners are registered on parent elements that also handle the same event.
To prevent this, you can use the stopPropagation() method on the event object.
stopPropagation() stops the event from propagating any further up the DOM tree, ensuring that only the intended element receives the event.
It’s important to be aware of event propagation when handling events to avoid unintended consequences and ensure the expected behavior of your code.