Event Propagation y Filtrado de Eventos en JavaScript

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:24

Event Propagation y Filtrado de Eventos en JavaScript

Curso de Optimización Web

Clase 25 de 38

Clase 25 / 38

Recursos

¿Cómo implementar un oyente de eventos eficiente para un modal?

En el desarrollo de aplicaciones web, el manejo eficiente de los eventos es clave para mejorar el rendimiento de la aplicación. Tradicionalmente, podríamos agregar un event listener a cada elemento que queramos que reaccione a un evento. Sin embargo, existe una técnica más óptima conocida como la propagación de eventos. Esta consiste en permitir que un solo elemento padre escuche los eventos de todos sus hijos, mejorando así el rendimiento.

¿Qué es la propagación de eventos?

La propagación de eventos es una técnica que permite que un evento generado en un elemento hijo se propague hacia arriba, hasta ser capturado por un elemento ancestro común. Esto es particularmente útil en marcos como React y Angular, donde el body del documento gestiona todos los eventos de sus elementos hijos. Esta técnica optimiza el manejo de eventos al reducir el número de listeners necesarios.

¿Cómo implementar la propagación de eventos?

Para implementarla en nuestra aplicación, en lugar de agregar un event listener a cada elemento a individualmente, podemos añadir un solo listener al body. Este manejará todos los clics en los hijos:

document.body.addEventListener('click', function(event) {
  let tagName = event.target.tagName;

  if (tagName !== 'IMG' && tagName !== 'A') {
    return;
  }

  // Código adicional para manejar el clic si es un elemento <img> o <a>
});

¿Cómo filtrar eventos específicos?

Una vez integrado en el body, es crucial filtrar los eventos que realmente nos interesan. Utilizaremos las propiedades target y currentTarget de los eventos:

target: Elemento donde se originó el evento.
currentTarget: Elemento donde se capturó el evento.

Si solo nos interesa el origen, debemos utilizar target. Filtraremos solo para los elementos deseados, como imágenes o enlaces:

if (!['IMG', 'A'].includes(event.target.tagName)) {
  return;
}

¿Cómo extraer información del dataset?

La extracción de información adicional, como un video ID de un enlace de YouTube, se puede hacer mediante el uso de dataset. Los atributos data-* se utilizan para almacenar datos personalizados en los elementos HTML:

const videoID = event.target.dataset.videoId;
console.log(videoID);

¿Cómo refinar el código para un manejo más seguro?

Añadimos verificaciones para asegurar que solo interactuamos con elementos que posean la clase específica que necesitamos:

let link = event.target;
if (link && link.classList.contains('js-video-link')) {
  // Manipulación del enlace
}

Al emplear estas técnicas, nuestro código se vuelve más eficiente y flexible, ajustándose mejor para futuras modificaciones. Con esta estructura optimizada, estamos listos para integrar librerías externas que requieran un manejo específico de los eventos.

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Event Propagation y Filtrado de Eventos en JavaScript