In this article, we are going to learn about one-time events in JavaScript and how we can create them. To perform a task we generally use event listeners in JavaScript. For example, if we need to calculate the sum of two variables, it is done by the click of a button in the DOM. It means we use a click event listener to get the sum of two variables.
One-time events: These are those events that only execute the event listener only once. Suppose we have created a button and added a click event. We create a one-time event if it only executes once, irrespective of the fact that a user clicks the button several times.
Suppose we have created a button that fetches the data from an API, if we are not adding a one-time event on it then it fetches the data from API on every click of the user, ignoring the previous responses. Because of this, it overloads our system and slows down the performance, and also gives a very bad user experience.
Approach: We add an event listener to a button and then use the removeEventListener() function to remove the event from that button. So in this way event listener executes its instructions only once.
What happens if we do not use a one-time event listener?
Event listener executes its functions every time when it listens to that listener from the user. Let’s say “click“, so whenever the user clicks that particular button, it every time starts executing the same instructions.
Example:
HTML
<!DOCTYPE html><html><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"> <style> body{ text-align:center; } </style></head><body> <h2 style="color:green">neveropen</h2> <div class="container" style="width:500px; margin:auto; text-align:center;"> <h3>One time event</h3> <button id="submitBtn" type="button" style="font-size:large;"> Submit </button> </div> <script src="script.js"></script></body></html> |
Javascript
let submitBtn = document.getElementById('submitBtn');submitBtn.addEventListener("click",()=>{ console.log("Executing Everytime");}) |
Output:
One time event listener creation: We use removeEventListener() to remove the event listener after it executes only once. It is not executing even after several clicking of the button because the event listener is removed from the button.
Example:
HTML
<!DOCTYPE html><html><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"> <style> body{ text-align:center; } </style></head><body> <h2 style="color:green">neveropen</h2> <div class="container" style="width:500px; margin:auto; text-align:center;"> <h3>One time event</h3> <button id="submitBtn" type="button" style="font-size:large;"> Submit</button> </div> <script src="script1.js"></script></body></html> |
Javascript
// button element let submitBtn = document.getElementById('submitBtn');submitBtn.addEventListener("click",func);// function execute when click event fires function func() { console.log("Event Listener Removed"); /* In "removeEventListener" first argument is event type and second argument is the name of the function that is start executing when click event fires */ submitBtn.removeEventListener("click",func);} |
Output:
