Desarrollo de la interfaz de usuario

¿Cómo delegamos eventos en JavaScript de forma responsable?

Uno de los aspectos fundamentales de cualquier interfaz digital, ya sea sitio web, web app o app nativa, es tener la capacidad de interactuar con el usuario y generar respuestas a sus acciones. Por ejemplo, al clickear un botón o pasar el puntero sobre un elemento, estas acciones deben entregar un feedback correcto. En la web puedes ver estas respuesta de manera nativa en elementos como los enlaces <a> donde se responde al click enviando al usuario a la url indicada en el atributo <href>.

Sin embargo, en muchos casos te encontrarás con que quieres añadir una funcionalidad no nativa a algún elemento, como por ejemplo levantar un modal (lightbox) al clickear un botón o al pasar a la siguiente imagen en un slider. Para este tipo de interacciones podemos comenzar a usar JavaScript en el desarrollo y generación de respuestas.

En el ambiente de un navegador, cada cosa que sucede después de la carga de la página en la interacción directa con el usuario, es comunicada al ambiente de Javascript a través de eventos. Dependiendo de la funcionalidad en cuestión, esta contendrá propiedades e información relevante para el desarrollador. En el caso del click, el evento disparado contiene la posición del puntero al momento de ser activado, la referencia del objeto en donde se inició y el nombre del mismo, entre otros.

Existen muchísimos eventos a los que podemos reaccionar y nombrarlos sale del foco de este artículo. Sin embargo, el equipo de Mozilla hizo una lista completa de los eventos estándar y no estándar, la que podemos consultar a la hora de diseñar las interacciones de nuestras aplicaciones.

Actualmente existen 2 métodos para delegar eventos a funciones específicas de JavaScript: En línea y Programática.

Delegación en línea

Este método es una herencia de los primeros días de la web. Se trata de las delegaciones en línea que se refieren a atributos html cuyo valor es un string de JavaScript que contiene la acción a realizar, un ejemplo de esto sería así:

<a href=”#” onclick=”alert(‘Hola!’); return false;”>decir hola</a>

Actualmente estos atributos son considerados una mala práctica y no recomendamos su uso en ningún contexto por los siguientes motivos:

• Mezcla de manera no semántica un lenguaje de programación (Javascript) con un lenguaje de marcado (HTML).
• Anula cualquier otra delegación hecha con el API moderno.
• No permite delegar más de una acción por evento.
• Se convierte en una pesadilla a la hora de incluir caracteres especiales dentro del código porque estos generan errores o resultados inesperados, haciendo necesario escaparlos uno a uno.
• Dificulta la mantenibilidad del código al generar basura y confundir a nuevos equipos de desarrollo que recién se están familiarizando con la plataforma.
• Se comportan de manera inconsistente entre navegadores.
• Navegadores futuros podrían dejar estos atributos obsoletos y estos quedarán nulos.

Delegación programática

El segundo método es la recomendación actual de la W3C en donde se usan funciones nativas del navegador para manejar las delegaciones de eventos. Estas funciones ofrecen más flexibilidad, control y orden a la hora de hacer desarrollos de este tipo, estas son:

• addEventListener: Delega una función a un evento en un elemento específico.
• removeEventListener: Quita o borra las delegaciones de un evento y elemento específico previamente registradas con addEventListener.
• dispatchEvent: Se usa para disparar eventos personalizados o para gatillar de manera programática eventos nativos en un elemento.

Ejemplo de uso

Usando el ejemplo anterior vamos a migrar la acción desde el método en línea, actualmente deprecado (obsoleto) y dañino al método programático, usando el API de la W3C.

<a href=”#” onclick=”alert(‘Hola!’); return false;”>decir hola</a>

Al clickear en este elemento nos debería aparecer un mensaje que dice “Hola!”. Para migrar al método aceptado debemos separar lo que es JavaScript de lo que es HTML, entonces será necesario hacer un nuevo archivo:

HTML

<a id=”boton” href=”#” >decir hola</a>

JavaScript

 var boton = document.getElementById(‘boton’);

boton.addEventListener(‘click’, function( evento ){
	evento.preventDefault();
	alert(‘Hola!’);
}, false);

De esta manera podemos controlar mejor lo que pasa cuando el usuario hace click en el botón “decir hola”. Si dejamos tal cual el código anterior cada vez que el usuario haga click en el botón aparecerá una alerta con el mensaje “Hola!”, ¿pero qué pasaría si queremos que esta acción suceda solo una vez? A través del API de los eventos podemos agregar y quitar estas delegaciones a medida que lo necesitemos. Así, si queremos que esto suceda una sola vez debemos instanciar la acción “decir hola” en una variable para que puedas identificar más adelante.

HTML

<a id=”boton” href=”#” >decir hola</a>

JavaScript

 var boton = document.getElementById(‘boton’);

var decir_hola = function( evento ){
	evento.preventDefault();
	alert(‘Hola!’);

	boton.removeEventListener(‘click’, decir_hola);
};

boton.addEventListener(‘click’, decir_hola, false);

jQuery al rescate del orden

Si bien la delegación programática es la mejor práctica y la más moderna, es posible que en aplicaciones más grandes se vuelva tediosa la administración de delegaciones. En estos casos es recomendable que usemos alguna librería que facilite este trabajo.

jQuery es una de las más usadas a la hora de desarrollar sitios web, esta permite una forma más fácil de escribir y entender la delegación ya que nos ofrece atajos para los eventos más comunes, estos son:

Todos estos atajos hacen uso de la función .on() la que podemos usar cuando necesitemos desarrollar un comportamiento más complejo o queramos delegar eventos menos comunes, como por ejemplo los eventos touch.

El método .on() nos ofrece más flexibilidad ya que podemos generar más acciones con menos código. Un ejemplo de esto sería que en una tabla <Table> arroje un mensaje cada vez que un usuario haga click. En este caso usando los atajos el código se verá más o menos así:

var decir_hola = function( evento ){
	alert(‘Hola!’);
};
$(‘tr’).click( decir_hola );

Lo que sucede aquí es que a cada elemento <tr> se le delega la función decir_hola cuando el usuario hace click en ellos. Si bien este código es correcto cuando estamos hablando de una tabla con muchas filas (<tr>), podemos tener un problema de memoria ya que estamos registrando delegaciones por cada uno de estos elementos. Una mejor manera de hacer esto es usar la flexibilidad de la función .on() asignando solo una vez la función decir_hola a la tabla y solo actuar cuando el evento se inicie en un <tr>, si hacemos esto el código se verá asi:

var decir_hola = function( evento ){
	alert(‘Hola!’);
};
$(‘table’).on(‘click’, ‘tr’, decir_hola’);

De esta manera no importa si la tabla tiene 10.000 filas, ya que solo registrarás la acción a un elemento en lugar de a los 10.000 que contiene.

Existen varios tutoriales y documentaciones en Internet que muestran ejemplos usando delegación en línea. Entendemos que estos se usan porque son más directos y fáciles de entender, pero debes ser responsable a la hora de la implementación y seguir las buenas prácticas, esto te permitirá ser más eficiente y crear un código más fácil de entender y mantener en el tiempo.

En la segunda entrega de Eventos en Javascript explicaremos qué hacen y para qué sirven los comandos preventDefault, stopPropagation y return false que encontrarás al trabajar con el método antes descrito.