DOM
Eventos

Parámetros

Observaciones

Introducción

Definición:

En computación, un evento es una acción u ocurrencia reconocida por el software que puede ser manejada por el software. Los eventos informáticos pueden ser generados o activados por el sistema, por el usuario o de otras maneras. Fuente de definición

Los eventos HTML son "cosas" que suceden a los elementos HTML. JavaScript puede "reaccionar" en estos eventos. a través de Event Listeners . Además, los eventos personalizados pueden activarse utilizando dispatchEvent . Pero esto es solo una introducción, ¡así que comencemos!

Escucha de eventos básicos

Para escuchar eventos, llame a target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

Esto activará loadImage cada vez que se haga clic en my-button .

Los detectores de eventos se pueden adjuntar a cualquier nodo en el árbol DOM. para ver una lista completa de todos los eventos activados de forma nativa en el navegador: haga clic aquí Enlace MDN para ver la lista completa de eventos

Eliminar oyentes de eventos

El método removeEventListener () elimina los controladores de eventos que se han asociado con el método addEventListener ():

element.removeEventListener("mousemove", myFunction);

Todo (nombre de evento, función y opciones) en el removeEventListener debe coincidir con el conjunto al agregar el detector de eventos al elemento.

.bind con removeListener

el uso de .bind en la función al agregar un detector de eventos evitará que la función se elimine, para eliminar realmente el eventListener que puede escribir:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

escuchar un evento solo una vez

Hasta que once opción sea ampliamente compatible, debemos eliminar manualmente la escucha par una vez que el evento se active por primera vez.

Este pequeño ayudante nos ayudará a lograr esto:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* No es una buena práctica adjuntar funciones al prototipo de Objeto, por lo tanto, puede eliminar la primera línea de este código y agregarle un objetivo como primer parámetro.

Esperando que el documento se cargue

Uno de los eventos más utilizados es esperar a que el documento se haya cargado, incluidos los archivos de script y las imágenes. El evento de load en el document se utiliza para esto.

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

En ocasiones, intenta acceder a un objeto DOM antes de que se cargue, lo que genera punteros nulos. Estos son realmente difíciles de depurar. Para evitar esto, use el evento DOMContentLoaded document en su lugar. DOMContentLoaded garantiza que el contenido HTML se haya cargado e inicializado sin esperar otros recursos externos.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

Objeto de evento

Para acceder al objeto de evento, incluya un parámetro de event en la función de devolución de llamada del detector de eventos:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

ya que el niño detiene la propagación del evento, y los eventos se escuchan durante la fase de propagación, haciendo clic en el niño solo activará al niño. sin detener la propagación se activarán ambos eventos.

e.preventDefault ();

El método event.preventDefault() detiene la acción predeterminada de un elemento para que no ocurra.

Por ejemplo:

• Evitar que un botón de envío envíe un formulario
• Evita que un enlace siga la URL

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget Identifica el destino actual para el evento, ya que el evento atraviesa el DOM. Siempre hace referencia al elemento al que se ha vinculado el controlador de eventos, en contraposición a event.target, que identifica el elemento en el que se produjo el evento.

en otras palabras

e.target devolverá lo que desencadena el dispatcher de eventos para desencadenar

e.currentTarget devolverá lo que asignó a su oyente.

HTML:

<body>
   <button id="my-button"></button>
</body>

Javascript:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

si haces clic en my-button ,

• e.target será my-button
• e.currentTarget será body

Evento de burbujas y captura

Los eventos activados en elementos DOM no solo afectan el elemento al que se dirigen. Cualquiera de los ancestros del objetivo en el DOM también puede tener la oportunidad de reaccionar ante el evento. Considere el siguiente documento:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

Si solo agregamos escuchas a cada elemento sin ninguna opción, entonces activamos un clic en el intervalo ...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... entonces el evento se propagará a través de cada antepasado, activando cada controlador de clic en el camino:

Text clicked!
Paragraph clicked!
Body clicked!

Si desea que uno de sus manejadores impida que el evento event.stopPropagation() más manejadores, puede llamar al método event.stopPropagation() . Por ejemplo, si reemplazamos nuestro segundo controlador de eventos con esto:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

Veríamos la siguiente salida, con el manejador de click body nunca activado:

Text clicked!
Paragraph clicked, and that's it!

Finalmente, tenemos la opción de agregar detectores de eventos que se activan durante la " captura " en lugar de burbujear. Antes de que un evento brote de un elemento a través de sus antepasados, primero se "captura" hasta el elemento a través de sus antepasados. Se agrega una escucha de captura especificando true o {capture: true} como el tercer argumento opcional para addEventListener . Si agregamos los siguientes oyentes a nuestro primer ejemplo anterior:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

Obtendremos la siguiente salida:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

Por defecto, los eventos se escuchan en la fase de propagación. Para cambiar esto, puede especificar en qué fase se escucha el evento especificando el tercer parámetro en la función addEventListener. (Para aprender sobre la captura y el burbujeo, verifique los comentarios )

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true significa escuchar el evento cuando se está ejecutando en el árbol DOM. false significa escuchar el evento mientras sube el árbol DOM.

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

Los cuadros de alerta aparecerán en este orden:

• 2: en la captura
• 1: en burbuja

Casos de uso en el mundo real.

El Evento de captura se enviará antes del Evento de burbuja, por lo que puede asegurarse de que un evento se escuche primero si lo escucha en su fase de captura.

Si está escuchando un evento de clic en un elemento padre y otro en su hijo, puede escuchar primero al niño o al padre, según cómo cambie el parámetro useCapture.

en el burbujeo, el evento hijo se llama primero, en la captura, el padre primero

HTML:

<div id="parent">
   <div id="child"></div>
</div>

Javascript:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

Si se establece fiel al evento primario, el EventListener activará primero el escucha principal.

Combinado con e.stopPropagation () puede evitar que el evento active al oyente de eventos secundario o al padre. (más sobre eso en el siguiente ejemplo)

Delegación de eventos

La delegación de eventos es un proceso que nos permite evitar agregar escuchas de eventos a nodos específicos; en su lugar, el detector de eventos se agrega al nodo principal. Este mecanismo utiliza la propagación / propagación de eventos para controlar un evento en un elemento / nodo de nivel superior en el DOM en lugar de utilizar el elemento en el que se originó el evento. Por ejemplo, creo que necesitamos agregar eventos para los siguientes elementos de la lista:

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

Necesitamos agregar manejadores de click y, básicamente, podemos agregar oyentes a cada elemento utilizando un bucle, pero imaginemos que queremos agregar elementos dinámicamente. Por lo tanto, registramos todos los controladores de eventos cuando se carga el DOM y después de que el DOM se inicializa y registra todos los controladores de eventos para cada elemento, el elemento recién insertado en el UL anterior no responderá al hacer clic porque ese elemento no estaba presente en el DOM Cuando hayamos registrado los oyentes de click click.

Entonces, para superar este problema, podemos aprovechar la delegación de eventos. Lo que significa que, en lugar de registrar los oyentes en cada uno de los elementos li , podemos vincular al oyente del evento a su elemento UL primario, por ejemplo:

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

Dado que, el evento se propaga (burbujea hacia arriba) de forma predeterminada, luego, al hacer clic en cualquier elemento LI , el elemento UL activará el mismo evento. En este caso, podemos usar el parámetro e en la función, que es en realidad el objeto de evento y contiene información útil sobre el evento, incluido el elemento original, que inició el evento. Entonces, por ejemplo, podemos usar algo como lo siguiente:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

Entonces, es obvio que e (objeto de evento) nos permite examinar el elemento fuente (e.target) y podemos inyectar fácilmente nuevos elementos a la UL después de cargar el DOM y el único controlador de eventos delegado manejará todos los eventos de clic. dentro del UL primario, que también consume menos memoria porque declaramos una sola función para todos los elementos.

Activación de eventos personalizados.

La API CustomEvent permite a los desarrolladores crear eventos personalizados y activarlos en nodos DOM, pasando datos a lo largo del camino.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString que representa el nombre del evento.

customEventInit: son parámetros opcionales (que se pasarán como e en el siguiente ejemplo).

Puede adjuntar eventListeners al document o cualquier elemento HTML.

Una vez que se haya agregado un evento personalizado y se haya vinculado al elemento (o documento), es posible que desee dispararlo manualmente desde javascript.

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);