Javascript no intrusivo para agregar eventos

Cuando programamos web a veces se nos hace necesario adherir un evento a un elemento del HTML para que cuando hagamos algo vinculado a él, se ejecute alguna función Javascript.

Los eventos pueden ser, hacer click sobre el elemento, pasar el cursor por encima, agarrarlo, soltarlo y algunos más. Hay varias manera de lograr esto. Vamos a comenzar viendo la más sencilla y directa que es agregando el evento directamente en el mismo código HTML.

Pasemos al código.

Primero definimos una función saludo y otra mensaje. A continuación, asociamos el elemento body a la primer función mediante el atributo onLoad. Hacemos algo similar para el elemento button y la función mensaje, pero con el atributo onClick.

Al cargar esta página, lo que obtendremos será un cartel de alert con el mensaje “Que hay de nuevo!” y si hacemos click en el botón, otro que dirá “Gracias por hacerme click”.

Esta técnica funciona bien y en algunos casos conviene utilizarla para no añadir complejidad a nuestros sistemas. Sin embargo, no es del todo correcta y si vamos un poco más allá, algunos puristas podrían considerarlo incorrecto y desrecomendado. Lo que hay que hacer es separar el código Javascript del HTML, así hacemos que el Javascript sea no intrusivo, es decir, no se entrometa con el HTML.

Para ello, vamos a utilizar dos funciones que no son de mi creación sino que obtuve de internet hace ya varios años. Las sigo usando porque son simples y fáciles de incorporar a mis proyectos y porque funcionan en todos los navegadores. Podemos poner el siguiente código en un archivo llamado eventListeners.js

Ahora vamos a codificar un nuevo documento HTML, similar al anterior, pero sin Javascript. Vamos a introducir el atributo id para hacer referencia al botón, sino, de otra manera no podríamos identificarlo utilizando Javascript. Además, agregamos dos enlaces a archivos Javascript en la sección <head> del documento.

Estarán pensando, “Pero ¿cómo? ¿no ibamos a utilizar un único archivo con el código Javascript? ¿Qué es el archivo scripts.js? En realidad usaremos el eventListeners.js como una librería. Nunca la vamos a modificar y siempre que la necesitemos la insertaremos en nuestros proyectos. En scripts.js vamos a escribir lo que necesitemos en particular para cada caso. Recuerden siempre poner en el <head> ambas referencias y siempre primero la de eventListeners.js.

Este es el código del archivo scripts.js. Por supuesto, hace lo mismo que en el primer caso que vimos.

Como verán, primero agregamos las dos funciones que teníamos antes tal cual estaban.

Noten que la función inicia() tiene dentro una llamada a nuevoEvento que es la función para agregar eventos de nuestro archivo eventListeners.js. No la utilizamos directamente sino que la metimos dentro de otra función. ¿Por qué hacemos esto? Si pusiéramos directamente la función nuevoEvento obtendríamos un error, esto es porque el documento se carga desde arriba hacia abajo. Es decir que primero se carga el head y luego el body. Cuando utilizamos nuevoEvento hacemos referencia a algún elemento del documento, en este caso al botón, sin embargo este debe cargarse antes de poder existir. Es por eso que la librería viene con otra función: addLoadEvent. Es la que se encarga de agregar los eventos cuando el navegador ya terminó de cargar el documento.

Como verán, se añaden las funciones saludo e inicia para cuando el documento ya esté cargado, eso quiere decir que cuando inicia se ejecute el botón ya existirá, entonces, nuevoEvento no tendrá inconvenientes en agregar el evento.

Si probamos el ejemplo veremos que el orden de ejecución hará que primero observemos el cartel de saludo. Luego, se ejecutará la función inicia y se añadirá el evento al elemento miBoton. Cuando hagamos click sobre él, podremos ver el otro mensaje.

Presten atención a los parámetros de la función nuevoElemento. El primero no es una cadena de caracteres, es un elemento html. El segundo sí es una cadena o string y es el nombre del evento pero sin el “on” delante. El tercer parámetro es la función asociada y se indica como una referencia (o variable) y no como string, es por ese motivo que no lleva comillas.

Con los nuevos frameworks de Javascript, esta misma técnica puede hacerse de forma más simple para el programador. Pero tengan en cuenta que, por ejemplo, JQuery, una de las librerías más populares necesita cargarse por completo para funcionar y su versión pack (la más económica) está en los 29k. Puede parecerles poco, pero en algunos casos es imprescindible intentar hacer la web lo más ligera posible y estos frameworks las hacen pesar demasiado para aportar ventajas que no alcanzan a compensar con funcionalidad.

En un artículo próximo les explicaré como agregar eventos con JQuery.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*