trasteando con el DOM 2: escuchas

En esta entrada veremos cómo vincular eventos con elementos del DOM mediante addEventListener.

Tarsila do Amaral

archivado en: JavaScript / 3 octubre, 2014 / taller:

En la entrada anterior de esta serie, que también podría haber titulado javaScript para diseñadores, vimos cómo distinguir los distintos tipos de nodo que hay en un documento DOM, en una página web, y cómo seleccionarlos por su id, su clase o por cualquier otro selector CSS. En esta empezaremos a hacer cosas divertidas, como reemplazar un nodo por otro, cambiar su contenido interno o añadir y quitar clases dinámicamente. Y todas estas operaciones nos servirán para entender cómo funcionan los eventos, que es como se llama a lo que sucede cuando sucede algo, como un click del ratón.

Pero antes de empezar, recordaré qué un objeto en programación es un conjunto de funciones denominadas métodos y de variables llamadas propiedades. Por ejemplo, podríamos construir un objeto para lanzar huevos fritos contra el arco iris de esta manera:

var miObjeto = lanzaHuevosFritos() {

var proyectil = "huevo frito";

var objetivo = "arco iris";

function lanzaHuevos() {

lanza proyectil contra objetivo;

}

};

En javaScript podemos acceder y utilizar los métodos y propiedades de un objeto mediante la notación de puntos:

¿Qué lanzamos? miObjeto.proyectil;

¿Contra qué? miObjeto.objetivo;

Huevos fritos contra arco iris... suena bien, vamos allá: miObjeto.lanzaHuevos();

Cuando seleccionamos un nodo del tipo elemento del DOM, por ejemplo por su id...

var titular = document.getElementById('titular');

...estamos creando un objeto del tipo element, que tiene una montonera de métodos y propiedades. Y para acceder a unos y otras lo único que necesitamos es usar la notación de puntos. Así, por ejemplo, si tenemos un nodo, un elemento, así:

<h1 id="titular">Soy una mandrágora pop</h1>

Esta propiedad titular.id sería «titular» y este método titular.hasAttribute('id') daría true, pues sí que tiene el atributo id. Esto quedará más claro un poco más adelante, ahora vamos a crear una máquina que fabrique sapos de colores que bailen swing.

El corazón de nuestra máquina es algo tan sencillo como esto:

<div id="maquina"></div>

<button id="addIngrediente">Añadir ingrediente</button>

<button id="crearSapo">Crear sapo</button>

Pongamos en marcha ahora los botones.

Hace muchos años para vincular javaScript con el html se añadían los eventos, es decir, las acciones, directamente en los tags. Así, por ejemplo, podríamos hacer que esos dos botones llamaran a sendas funciones de js al ser pulsados escribiendo esto:

<button id="addIngrediente"  onclick="funcionAddIngrediente()">Añadir ingrediente</button>

<button id="crearSapo"  onclick="funcionCrearSapo()">Crear sapo</button>

Pero esta manera de desencadenar las acciones no terminaba de convencer porque se consideraba intrusiva. Aparte de que así quedaba un código más feo y complicado de mantener, donde se mezclaban dos lenguajes en un mismo documento, esta manera provocaba un problema grave de accesibilidad, ya que por aquel entonces algunos navegadores tenían el javaScript desactivado (y no, no vestíamos con pieles, dormíamos en cavernas y comíamos carne cruda).

Así que los sabios se pusieron a pensar cómo desvincular las acciones de los tags y, además de crear jQuery, se inventaron las «escuchas» que funcionan de la siguiente manera: sobre un elemento, que puede ser el propio documento web, se vincula una escucha, un EventListener, en la que se le indica al navegador que cuando suceda determinada acción se llame a una función. Su sintaxis es:

target.addEventListener(type, listener[, useCapture]);

donde target es el elemento sobre el recae la acción, type el tipo de acción, listener la función y useCapture un valor booleano, opcional, para especificar si queremos que sea del tipo burbuja o no, que es un concepto que explicaré más adelante. De momento no lo vamos a usar. Así, en vez de poner las acciones en los tags de nuestra máquina, vamos a sacarlos a nuestro script.

<button id="addIngrediente">Añadir ingrediente</button>

<button id="crearSapo">Crear sapo</button>

<script>

var botonAdd = document.getElementById('addIngrediente');

var botonCrearSapo = document.getElementById('crearSapo');

botonAdd.addEventListener('click', addIngredientes);

botonCrearSapo.addEventListener('click', addSapo);

function addIngredientes() {

// Aquí pasarán cosas

}

function addSapo() {

// Aquí pasarán cosas

}

</script>

Existen eventos para todo lo que puede hacer un usuario, la lista es tremenda, pero los más usados son:

Un apunte más para terminar esta entrada. Las escuchas consumen mucha memoria, por lo que cuando ya nos las necesitamos hay que eliminarlas con removeEventListener, un tema sobre el que volveré más adelante.

En la siguiente entrada seguiremos con nuestra máquina.

|| Tags: ,

valoración de los lectores sobre trasteando con el DOM 2: escuchas

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (6 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.