Event Listeners "Captura de eventos"

Event Listeners

Un capturador de eventos es un procedimiento o función el cual espera que ocurra un evento. Ejemplos de un evento son el usuario haciendo clic o moviendo el mouse, presionando una tecla en el teclado, etc. El capturador Listener está programado para reaccionar a una entrada o señal llamando al controlador del evento.

Utilizamos addEventListener para capturar eventos en un elemento del DOM.

  
  <button id="click_me">Click Me</button>
  

  
  let btn = document.querySelector("#click_me");
  btn.addEventListener("click", function(event) {
    console.log(event); //-> MouseEvent
    console.log(event.target); //-> Click Me
  }, false);
  

Evento a multiples elementos

La función addEventListener de JavaScript requiere que pase un elemento específico e individual para capturar evento. No es posible pasar una matriz o lista de nodos de elementos coincidentes. En lugar de capturar elementos específicos, capturamos todos los clics en una página y luego verificaremos si el elemento seleccionado tiene un selector coincidente.

  
  <button class="click-me" id="click_me">Click Me</button>
  

  
  window.addEventListener('click', function ( event ) {
    if (event.target.classList.contains( 'click-me' ) ) {
      console.log(event.target); //-> Click Me
    }
  }, false);
  

Multiple eventos

En JavaScript, cada tipo de evento requiere su propio capturador de eventos. Podemos usar una función con nombre y pasarla a su capturador de eventos, para evitar tener que escribir el mismo código una y otra vez.

  
  const eventFunction = () => {
    console.log("Event happen");
  }

  window.addEventListener('click', eventFunction, false);
  window.addEventListener('scroll', eventFunction, false);
  

Rebote de evento "Event Debouncing"

Eventos como scroll y resize causan problemas grande en el desempeño de algunos exploradores, para esto utilizamos rebote. Rebote es una forma de obligar a un capturador de eventos a esperar un cierto período de tiempo antes de disparar evento nuevamente. Para usar ests tecnica, configuraremos un tiempo de espera. Esto se usa como un contador para decirnos cuánto tiempo ha pasado desde la última vez que se ejecutó el evento.

Cuando se dispara nuestro evento, si el tiempo de espera no tiene valor, asignaremos una función setTimeout que caduque después de 66 ms y contenga nuestros métodos que queremos ejecutar en el evento.

Si han pasado menos de 66 ms desde que se ejecutó el último evento, no sucederá nada más.

  
  let timeout;

  window.addEventListener('resize', function(event) {
    console.log( 'no debounce' );

    if(!timeout) {
      timeout = setTimeout(function() {

        // Reset timeout
        timeout = null;

        // Run our resize functions
        console.log( 'debounced' );
      }, 66);
    }
  }, false);
  

Usar captura

El último argumento en addEventListener es useCapture, y especifica si desea o no "capturar" el evento. Para la mayoría de los tipos de eventos, esto debe establecerse en falso. Pero ciertos eventos, como el enfoque, no burbujean. Establecer useCapture en verdadero le permite aprovechar el burbujeo de eventos para eventos que de otro modo no lo admitirían.

  
  document.addEventListener('focus', function (event) {}, true);