3 comandos para delegar eventos en JavaScript
Existe una confusión sobre las funciones de los distintos comandos usados al desarrollar interacciones en JavaScript. Te explicamos cuáles son las etapas de la delegación de eventos, cuáles son los métodos usados para configurarlas y cómo estos afectan tu event handler.
Hace poco te enseñamos cómo funciona la delegación de eventos por JavaScript y prometimos explicar cómo usar los comandos específicos. Una vez que nos vamos adentrando en estos desarrollos, los términos preventDefault, stopPropagation y return false comienzan a sonar cada vez más. Sin embargo, en algunos equipos de desarrollo existe una gran confusión acerca de qué es lo que hacen estos comandos y cómo afectan a su event handler.
Para entender estos conceptos primero debemos entender cómo se inicia, desarrolla y muere un evento en el DOM (Document Object Model). Esto ocurre en las siguientes etapas:
- Inicialización: Se gatilla el evento en un elemento.
- Captura: El evento se propaga desde la raíz hasta el elemento en donde se gatilló.
- Burbujeo: El evento se propaga hacia arriba en el árbol del documento desde el elemento que lo gatilló hasta llegar a la raíz.
- Muerte: Se completa la propagación del evento.
Una vez asimilados estos procesos podemos empezar a entender los comandos.
event.preventDefault()
Este método anula la acción por defecto de un evento. El ejemplo más común es la delegación del evento click en un elemento de ancla (<a>), por defecto cuando se hace un click en este el navegador se dirigirá a la dirección especificada en el atributo href del ancla. Podemos anular este comportamiento usando el método .preventDefault() el cual nos permitirá sobre escribir este comportamiento con el que queremos agregar. Este método no afecta ninguna de las etapas del evento, vale decir, este será capturado y burbujeará sin interrupciones.
event.stopPropagation()
El método .stopPropagation() interrumpe las etapas de captura y burbujeo haciendo que el evento no se propage a través del documento, esto es útil a la hora de delegar un elemento que se encuentra dentro de otro en el mismo evento.
return false
Cuando uno incluye return false dentro de un event handler este ordenará con fuerza bruta que el evento no haga su acción por defecto y que interrumpa sus fases de propagación. El uso de este comando es usualmente malentendido por los desarrolladores y al ser mal aplicado puede resultar en delegaciones inconsistentes entre navegadores y dispositivos, ya que si la acción que queremos realizar se demora mucho es probable que la acción por defecto se active de todas formas o que la propagación continúe mientras no se alcance este comando.
Es importante recordar que cada vez que se registra un event handler estamos ocupando un poco de memoria y poder de procesamiento. En aplicaciones grandes o en código pensado de forma superficial esto puede darnos grandes problemas de performance. Por esto, cada vez que pensamos en hacer esto tenemos que hacerlo de la forma en que menos impacto genere para nuestra interfaz.
Acerca del Autor
Agregar un comentario