Sección 2: DOM

Lección 4: Eventos del DOM

Bienvenidos de nuevo. Esta es la parte en que todo se pone realmente muy entretenido. Podemos usar JavaScript para escuchar eventos, basados en las acciones que los usuarios realizan dentro de nuestros sitios web. ¿Qué queremos decir con eventos?

Eventos son todas aquellas acciones como hacer click, mover el mouse para ingresar a una zona de nuestra página, pasar el mouse sobre algún elemento de la página web, o ingresar texto dentro de un campo de búsqueda. Podemos escuchar estos eventos y reaccionar a ellos usando JavaScript.

Veamos cómo hacerlo. Para ello seguiremos usando el ejemplo empleado en la lección de selectores del DOM, aquel ejemplo en el que teníamos un listado de cosas por comprar.

Ahora añadamos un botón debajo del párrafo.

Como podemos ver, añadimos debajo de nuestro párrafo, un botón que dice “Agregar”.

Ahora creemos un archivo script.js dentro de la misma carpeta de nuestro archivo index.html.

Añadamos la referencia a este archivo script.js dentro de nuestro archivo index.html a través de un par de etiquetas script. Ahora, a través de lo que aprendimos en la lección donde vimos selectores del DOM, seleccionemos nuestro botón:

¿Cómo podemos saber cuando un usuario haga click sobre este botón? Para ello utilizaremos los eventos. Visitemos el sitio web para desarrolladores creado por Mozilla en el cual encontraremos muchísima información sobre los eventos que existen en el DOM.

Para ver esta documentación debemos acceder a https://developer.mozilla.org/en-US/docs/Web/Events

Como podemos ver, existe un extenso listado de eventos de los cuales podemos hacer uso. Vemos que tenemos eventos de teclado (key events), eventos del mouse (mouse events), los cuales son los usados con mayor frecuencia. Dentro del listado de eventos del mouse, vemos que tenemos un evento click. Lo usemos para ver cómo funciona.

En la variable botón llamaremos a su método addEventListener pasándole como primer parámetro un string con la palabra “click”, el cual indica el tipo de evento que vamos a escuchar, y como segundo parámetro, la función, la cual va a imprimir por la consola un string con la palabra “click”, indicándonos que cada vez que el usuario haga click sobre el botón esta función va a ser ejecutada.

Ahora, veamos cómo funciona nuestra aplicación. Vemos que cada vez que hacemos click, se va a imprimir en la consola el mismo mensaje, por lo cual nuestro navegador, para no repetir en líneas distintas, muestra el mensaje junto al número de veces que ha sido impreso.

Podemos ver que cada vez que hacemos click en el botón, este número se incrementa en uno. De esta manera, nuestro programa funciona tal como queríamos.

Probemos ahora cambiar nuestro código, modificando el evento “click” por el evento “mouseenter”.

Vemos que cada vez que nuestro mouse se apoya por encima del botón, sin necesidad de hacer click, el contador va a incrementarse en uno. De esta manera, podemos ver que el evento “mouseenter” simplemente se ejecuta cuando pasamos el puntero sobre el elemento que se encuentra escuchando este evento, sin necesidad de hacer click sobre él.

Así como tenemos el evento “mouseenter” tenemos el evento “mouseleave”, el cual se activa cada vez que el mouse sale de la zona del elemento que se encuentra escuchando este evento.

Siguiendo con nuestro ejemplo vamos a hacer algunas mejoras. Agreguemos un campo de texto en el cual podríamos ingresar el nombre de elementos que quisiéramos comprar y luego haciendo click en el botón añadiríamos esos elementos a nuestro listado.

Veamos que ya tenemos nuestro campo de texto y nuestro botón para agregar más elementos al listado, pero al hacer click en el botón agregar vemos que todavía no se añade al listado ningún elemento. Para ello, necesitamos añadir código JavaScript a nuestro archivo script.js.

Creamos una variable llamada input, a la cual asignaremos el elemento input.

Ahora reemplazaremos la sentencia que imprimió el mensaje por consola dentro de nuestro evento por una primera sentencia en la cual vamos a definir una variable llamada “li”, a la cual le asignaremos el elemento que va a devolver document.createElement pasándole como parámetro “li”.

Este nuevo método que estamos viendo, createElement, simplemente lo que hace es crear un nuevo elemento HTML de tipo “li” y en este caso asignarlo a una variable.

Ya tenemos nuestro elemento “li”. Ahora a este elemento le está faltanto el texto. Para ello, vamos a utilizar el método li.appendChild. ¿Qué significa appendChild? Append significa añadir, y child significa hijo.

Entonces este método simplemente lo que hace es añadir un hijo, en donde como parámetro vamos a llamar a document.createTextNode, pasándole como parámetro el texto.

El método createTextNode lo que va a hacer es crear un nodo de texto con el texto que le pasemos como parámetro. Entonces, recapitulando, la sentencia va a ser:

Lo que hacemos con esta sentencia es, añadir a "li" un hijo, donde a su vez este hijo está compuesto por un nuevo texto de nodo con la palabra prueba. Luego de esto, al inicio de nuestro programa, vamos a añadir una tercer línea donde vamos a definir una variable "ul", en la cual vamos a almacenar el elemento "ul" de nuestra página. Para ello ejecutaremos document.querySelector("ul");

Una vez que ya tenemos nuestra lista de elementos, y tenemos el nuevo elemento que queremos añadir, simplemente lo que tenemos que hacer es dentro del evento, agregar en la función del evento una tercera línea en la cual vamos a ejecutar:

Con lo cual vamos a añadir a nuestra lista el nuevo elemento contenido en la variable li.

Como podemos ver, cada vez que hacemos click en el botón agregar, vamos a ver como en nuestro listado se añade un nuevo elemento con el texto "Ítem".

De esta manera podemos ver que estamos avanzando hacia lo que queremos que nuestro programa finalmente haga.

Ahora probemos añadir a nuestro listado un ítem ingresado en el campo de texto. Para ello, dentro de nuestro evento, lo que simplemente debemos hacer es reemplazar el texto "Ítem" por input.value

Con input.value lo que hacemos es retornar el texto que posee el cuadro de texto. Ahora probemos nuestro programa.

Como podemos ver, podemos ingresar texto en nuestro campo de texto y luego hacer click en el botón agregar y el ítem será añadido en el listado. Ahora probemos añadir nuestro campo de texto en blanco para ver qué sucede. Si presionamos el botón "agregar vemos que se van añadiendo elementos en blanco en nuestro listado. ¿Cómo podemos solucionar esto?

Para solucionar esto, simplemente debemos añadir una condición al inicio de la ejecución de nuestro evento. Para ello, debemos preguntar si el campo de texto contiene texto y no se encuentra vacío.

En el caso de que no se encuentre vacío se deben ejecutar las sentencias antes empleadas, caso contrario, estas sentencias no se ejecutarán por lo que no permitiremos que se añadan elementos en blanco en nuestro listado.

Para saber si no está vacío nuestro campo de texto, podemos preguntar lo siguiente:

Ahora queremos hacer otra mejora a nuestro programa. Cada vez que añadimos un elemento, queremos que nuestro campo de texto se quede en blanco para poder añadir un nuevo elemento. En este caso simplemente debemos añadir al final de nuestra sentencias dentro del evento la siguiente sentencia:

Vemos que podemos añadir otra mejora más todavía. Queremos añadir el texto y al presionar la tecla Enter que este elemento sea incorporado al listado.

Para ello, lo que proponemos es crear un evento del campo de texto, el cual cada vez que se presione la tecla Enter, corrobore si el campo tiene texto, y en caso de ser así, se añadirá este nuevo elemento al listado.

Para ello copiaremos todo el código de nuestro evento del click en el cual reemplazaremos la variable boton por la variable input, y debemos añadir, antes de saber si el campo de texto se encuentra en blanco o no, una sentencia para verificar que se ha presionado la tecla Enter y no otra tecla.

Para ello, utilizaremos un código de teclas, el cual podemos ver en la siguiente página: https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Como podemos ver en esta página, tenemos una codificación en la cual cada tecla posee un código numérico que le corresponde. Tenemos dentro de esta página, una barra de texto con la palabra “Try it!” (inténtalo), en la que podemos presionar una tecla nos devolverá cuál es el código correspondiente para esa tecla. Probemos presionar Enter y veamos cuál es su código.

Vemos que el código de la tecla Enter es el 13. De esta manera, sabemos que tenemos que preguntar si el usuario ha presionado la tecla con el código 13.

Volviendo a nuestro código, lo primero que debemos hacer es añadir a la función de nuestro evento un parámetro, en el cual en este caso llamaremos event, pero podría tener el nombre que nosotros quisiéramos, aunque se recomienda tener un nombre representativo como la letra e o la palabra event.

Este parámetro contendrá toda la información sobre el evento que ha ocurrido y ha sido capturado por este escuchado de eventos.

En nuestro caso, este parámetro es un objeto que contiene la información sobre la tecla que ha sido presionada.

Entonces, ahora si podemos añadir al inicio de nuestro evento la pregunta en la cual indagamos si nuestro input.value.length es mayor que cero, y además si event.keyCode es igual a 13. En el caso de que sea verdadero, ejecutamos todas las sentencias, como lo veníamos haciendo antes.

Vemos que nuestro código funciona perfectamente y nuestro programa hace lo que nos habíamos propuesto que haga.

Ahora intentemos optimizar nuestro código, ya que vemos muchas sentencias que se repiten. Quizás esto parezca innecesario, pero realmente ayudará a la legibilidad y mantenimiento de nuestro código.

Así que extraigamos parte de la lógica y realicemos un proceso conoce como "refactoring" o "refactorear", el cual consiste en hacer que el código luzca mejor.

Vemos que en ambas funciones en las sentencias if se verifica si el contenido del input tiene un tamaño mayor que cero. Por lo que podemos añadir una nueva función, a la que llamaremos tamanoInput(), que nos retorne el tamaño del value del elemento input. Llamaremos a esta función desde las dos sentencias if.

Vemos también que las cuatro sentencias dentro de los if se repiten. Por lo que podemos nuevamente crear una nueva función, colocar a esas dentro dentro de ellas, y llamar a esta nueva función desde las sentencias if.

Ahora, en lugar de tener las funciones como segundos parámetros en los escuchadores de eventos (event listeners), vamos a definir estas funciones afuera. Para eso crearemos las funciones agregarItemListaDespuesClick() y agregarItemListaDespuesTeclaPresionada(event).

Una cuestión a tener en cuenta en el código anterior son las funciones que son parámetros de otras funciones, las cuales se llaman sin colocar los paréntesis. Estas funciones parámetros se conocen como funciones callback (devolución de llamada), y son muy utilizadas en JavaScript.

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!