Eventos
-
Son objetos
-
Tipos:
-
Los callbacks de los eventos pueden recibir un argumento con información sobre el propio evento:
-
button.addEventListener('click', function(e) {
console.log(e);
e.stopPropagation();
})
-
event.target: retorna el elemento donde el elemento ha ocurrido.
-
event.target.value: valor del elemento en cuestión
-
preventDefault()
-
previene/detiene el comportamiento por defecto del navegador al llevar a cabo el
evento en cuestión.
-
Ej.: en los eventos submit en los form, al clickar en el botón que ejecuta ese evento, el
navegador recarga la página tras enviar esa info al servidor. Con preventDefault(),
evitamos ese
comportamiento para así poder hacer/ver lo que queramos.
-
stopPropagation() - para evitar el Bubbling
-
Evita que se propaguen eventos a elementos superiores del DOM que tengan también un eventListener asociado
-
Ejemplo: un botón dentro de un div, le añadimos al evento stopPropagation() para que solo
se ejecute el evento de ese botón y no el que tenga el div o elementos padres.
-
No todos los eventos se propagan
-
si la propiedad del evento,
bubbles: false, significa que ese evento NO se
propaga
-
Ejs. click SÍ se propaga, mouseenter NO
-
A diferencia de preventDefault(), aquí NO detenemos el comportamiento del navegador
-
stopImmediatePropagation()
-
ejecuta solo el primer evento asignado a un elemento (en caso de tener varios) y se detiene
-
Delegación (Iterar sobre elementos y evitar asignar un evento a cada uno, sino un solo evento al
contenedor):
-
Manera tradicional 1:
-
Podemos seleccionar todos los
li de una página e iterar sobre ellos,
asignando a cada uno un evento (pudiendo ser el mismo, como que al clickar cada uno se
coloree de rojo el fondo).
-
Ej.
const listItems = document.querySelectorAll('li');
listItems.forEach(listItem => listItem.addEventListener('click', event => {
event.target.classList.toggle('hightlight')}))
-
Esto es correcto pero no del todo eficiente, ya que asignar tantos eventos
consume más memoria.
-
Manera tradicional 2:
event.target.closest(cssSelector);