Eventos personalizados en javascript

Los eventos fundamentalmente sirven para notificar a otras funciones que están «escuchando» esos eventos que algo ha ocurrido. En las aplicaciones web estamos acostumbrados a usar eventos asociados a acciones del usuario como pulsar un botón, mover el ratón, hacer click, … Sin embargo podemos crear nuestros eventos asociados a cualquier acción que deseemos.

Para crear un evento solo necesitamos instanciar un objeto CustomEvent con el nombre del evento:

event = new CustomEvent("event");

Si queremos pasar parámetros tenemos que usar el campo detail:

event = new CustomEvent("event", {
   detail: {
     value: 1
   }
});

El evento debe de ir asociado a un elemento del DOM o al document:

var button = document.getElementById("boton");
button.dispatchEvent(event);

Para «escuchar» un evento usamos addEventListen que asocia el evento a una función que se llama cuando este se dispara:

button.addEventListener("odd", function(e){console.log(e.detail.value);});

La función recibe como parámetro un objeto event con todos los datos del evento. Para acceder a los datos que hemos incluido se puede acceder a valor detail del parámetro.

Veamos un ejemplo completo que convierte un click del ratón en dos eventos uno que se lanza las veces pares y otro las impares:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="boton"> Pulsame </button>
</body>
  
<script>
  
var button = document.getElementById("boton");
var clicks = 0;
button.addEventListener("click", 
function(e) { 
  console.log("click");
  clicks++;
  var event;
  if(clicks % 2){
    event = new CustomEvent("odd", {
    detail: {
      value: clicks
    }
    });   
  } else {
    event = new CustomEvent("even");
  }
  
  button.dispatchEvent(event);
  
});
button.addEventListener("odd", function(e){console.log(e.detail.value);});
button.addEventListener("even", function(e){console.log("even!");});
</script>
</html>

Los eventos permiten una fácil comunicación entre distintas partes de la aplicación. La parte que emite el evento se desvincula de quién está escuchándolo. A su vez los consumidores del evento escuchan o dejan de hacerlo cuando les interesa sin interferir entre ellos.

Relacionado