014. DOM: Eventos con Parámetros y Remover Eventos

En el capítulo anterior veíamos las 3 formas que existen para poder declarar un evento:

  • Como atributo de una etiqueta HTML.
  • Como manejador semántico.
  • Como manejador múltiple cuando queramos desencadenar varias funciones.

En este capítulo vamos a ver como remover eventos, y como hacer cuando necesitemos pasar parámetros a la función manejadora del evento.

Pasar parámetros a una función manejadora

En el capítulo anterior dijimos que una función que se ejecuta en un evento se le conoce como event handler o manejador de eventos, en la cual hay una regla muy importante, cualquier función que se ejecute en un evento sólo puede recibir como parámetro el evento en sí, no se le pueden pasar más parámetros a una función manejadora de eventos, pero qué ocurre si tenemos la necesidad de cuando una función se ejecute en un evento, pasar parámetros porque necesitamos trabajar dichos parámetros, lo podemos hacer, de una manera que engañamos algo al DOM del navegador.

Lo que vamos a hacer es en vez de incluir directamente la función que queremos ejecutar, vamos a utilizar una arrow function, dentro de la cual sí que vamos a incluir la función que queremos ejecutar.

Veamoslo en un ejm.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eventos con parámetros</title>
</head>

<body>
  <h1>Eventos con parámetros</h1>
  <button id="evento-multiple">Haz clic</button>

<script>
  const $eventoMultiple = document.getElementById("evento-multiple");

  function saludar(nombre = "Desconocido") {
   alert(`Hola ${nombre}`);
  }

$eventoMultiple.addEventListener("click", () => {
  saludar("Pedro");
});
</script>
</body>
</html>

Por tanto, para poder pasar parámetros a una función manejadora, envolvemos dicha función en una arrow function a la cual le pasamos la función que queremos ejecutar, con los parámetros que necesitemos. Como quien va a estar recibiendo el evento es la arrow function, no tenemos ningún problema y no nos va a dar ningún error.

Eliminar eventos

Al igual que disponemos de una función llamada addEventListener(), tenemos otra función llamada removeEventListener() que lo que hace es remover el evento asociado. Veamos un ejm para entender su funcionamiento.

Ejm

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Eliminar eventos</title>
</head>

<body>
  <h1>Eliminar eventos</h1>
  <button id="evento-remover">Removiendo eventos con manejadores múltiples</button>

  <script>
    const $eventoRemover = document.getElementById("evento-remover");

    const removerDobleClic = (e) => {
     alert(`Removiendo el evento de tipo ${e}`);
     console.log(e);
     $eventoRemover.removeEventListener("dblclick", removerDobleClic)
     // Desabilitamos el botón con la propiedad disabled
     $eventoRemover.disabled = true;
    }

   $eventoRemover.addEventListener("dblclick", removerDobleClic);
 </script>
</body>
</html>
Scroll al inicio