Using Event Listeners And Event Objects

Event Listeners

Event listeners are used to trigger functions in response to user interactions with the webpage such as clicking a button or scrolling.To add an event listener to an element, we use the addEventListener() method and specify the event type and function to be triggered.

Example :<!DOCTYPE html> <html> <head> <title>Event Listener Example</title> </head> <body> <button id="myButton">Click Me</button> <p id="myOutput"></p> </body> <script> const myButton = document.getElementById("myButton"); const myOutput = document.getElementById("myOutput"); myButton.addEventListener("click", function() { myOutput.textContent = "Button clicked!"; }); </script> </html>

Output :

Explanation :

In this code, we first select the button element with an ID of “myButton” and the paragraph element with an ID of “myOutput” using document.getElementById(). We then add an event listener for a click event on the button using myButton.addEventListener(). The callback function passed to addEventListener() sets the text content of the paragraph element to “Button clicked!” when the button is clicked.

Event Object :

When an event is triggered, an event object is created that contains information about the event, such as the type of event and the element that triggered the event. We can access this event object in our event listener function and use its properties and methods to perform actions in response to the event.

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> <form> <label for="username">Username:</label> <input type="text" id="username"> <br><br> <label for="password">Password:</label> <input type="password" id="password"> <br><br> <button type="submit" id="submitBtn">Submit</button> </form> </body> <script> const submitBtn = document.getElementById("submitBtn"); const form = document.querySelector("form"); submitBtn.addEventListener("click", function(event) { // Prevent the default form submission event.preventDefault(); // Validate the form fields here const username = document.getElementById("username").value; const password = document.getElementById("password").value; // Do something with the form data console.log("Username: " + username); console.log("Password: " + password); }); </script> </html>

Output :

Explanation :

In this example, when the submit button is clicked, the click event is triggered and the event listener function is executed. Inside the function, we first prevent the default form submission behavior using the preventDefault() method. Then we can perform any necessary validation on the form fields, and finally do something with the form data (in this case, logging it to the console).