En este artículo, vamos a aprender sobre eventos únicos en JavaScript y cómo podemos crearlos. Para realizar una tarea, generalmente usamos detectores de eventos en JavaScript. Por ejemplo, si necesitamos calcular la suma de dos variables, se hace haciendo clic en un botón en el DOM. Significa que usamos un detector de eventos de clic para obtener la suma de dos variables.
Eventos de una sola vez: Estos son aquellos eventos que solo ejecutan el detector de eventos una sola vez. Supongamos que hemos creado un botón y agregado un evento de clic. Creamos un evento único si solo se ejecuta una vez, independientemente del hecho de que un usuario haga clic en el botón varias veces.
Supongamos que hemos creado un botón que obtiene los datos de una API, si no agregamos un evento de una sola vez, obtiene los datos de la API en cada clic del usuario, ignorando las respuestas anteriores. Debido a esto, sobrecarga nuestro sistema y ralentiza el rendimiento, y también brinda una experiencia de usuario muy mala.
Enfoque: agregamos un detector de eventos a un botón y luego usamos la función removeEventListener() para eliminar el evento de ese botón. Entonces, de esta manera, el detector de eventos ejecuta sus instrucciones solo una vez.
¿Qué sucede si no usamos un detector de eventos de una sola vez?
El detector de eventos ejecuta sus funciones cada vez que escucha ese detector del usuario. Digamos «hacer clic «, por lo que cada vez que el usuario hace clic en ese botón en particular, cada vez comienza a ejecutar las mismas instrucciones.
Ejemplo:
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">GeeksforGeeks</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");
})
Producción:
Creación de un detector de eventos por única vez: usamos removeEventListener()para eliminar el detector de eventos después de que se ejecute solo una vez. No se ejecuta incluso después de varios clics en el botón porque el detector de eventos se elimina del botón.
Ejemplo:
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">GeeksforGeeks</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);
}
Producción:
Publicación traducida automáticamente
Artículo escrito por namankumar2592 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA