Desarrollo de la interfaz de usuario
3 comandos para delegar eventos en JavaScript
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.
event.preventDefault()
<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()
.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
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.Autor
Equipo IDA
Equipo IDA
Investigamos las tendencias en proyectos y estrategias digitales para complementarlas con nuestra experiencia en artículos informativos. Nuestro objetivo es aportar al desarrollo del área, discutiendo la efectividad de las tecnologías y técnicas aplicadas.
Artículos relacionados
Accesibilidad cognitiva
Estás perdiendo a uno de cada cinco usuarios porque el modo oscuro no es una estrategia de inclusión
Diseño de Experiencia
Arquitecturas de información en tiempos de Inteligencia Artificial
Inteligencia Artificial