martes, agosto 28, 2012

Tutorial de desarrollo web, Parte XLII: Eventos (IV)

Otra semana más aquí, siguiendo con el tema de los eventos que tuvimos aparcado durante unas semanas y que la semana pasada rescatamos. Esta semana vamos a ver el último modo de incluír eventos en nuestro código, y si la semana pasada lo hacíamos a través de una propiedad del objeto elemento, esta vez lo haremos a través de un método.
Retomemos el código de ejemplo de la semana pasada. En primer lugar, el código HTML:

<input type="submit" value="Aceptar" id="aceptar"/>

Luego veamos el código JavaScript:

var botonAceptar = document.getElementById("aceptar");

Como vimos la semana pasada, ahora en la variable "botonAceptar" está contenido un objeto de tipo "elemento HTML", gracias al cual podemos acceder a todos los atributos de la etiqueta HTML como propiedades del objeto. Sin embargo, como aprendimos hace unas semanas, los objetos también tienen métodos, y precisamente vamos a usar un método ahora:

function aceptar()
{
   alert("Usted ha aceptado.");
}
botonAceptar.addEventListener('click', aceptar, false);

Este código puede parecer bastante confuso, pero en realidad es bastante simple, así que vamos a ir paso a paso:
  • Lo primero que hacemos es crear la función que le vamos a asignar al evento. En este caso nuestra función se llama "aceptar()" y sólo contiene un "alert".
  • En segundo lugar llamamos al método "addEventListener" del objeto "botonAceptar", el cual añade un  "listener" u "oyente" al objeto. ¿Qué es un "oyente"? Básicamente es una instrucción que mantiene al objeto activo en caso de que se produzca un evento en concreto, en cuyo caso comunica dicho evento con la función. Como podréis imaginar, hasta ahora habíamos creado oyentes, pero no lo habíamos llamado como tales. Finalmente, hablemos de los tres parámetros de la función.
    • En primer lugar, el nombre del evento como una string. En el caso del "addEventListener", los eventos tienen nombres distintos a los que tenían como atributos de HTML, aunque en la mayoría de los casos (si no en todos) nos vale con quitarles la palabra "on".
    • En segundo lugar, el nombre de la función ya creada. También cabe la posibilidad de crear una función aquí, pero eso lo veremos más abajo.
    • Finalmente, un booleano del que tendríamos bastante para hablar, así que eso será en otra ocasión. De momento, pongámoslo a true.
Como he mencionado hace un momento, cabe la posibilidad de incluir la función dentro del propio método "addEventListener()", de modo que el código anterior podría quedar así:

botonAceptar.addEventListener('click',
  function()
  {
      alert("Usted ha aceptado.");
  },
  false);

Todas estas variantes que estamos viendo son válidas tanto unas como otras, aunque gracias al booleano final de este método tenemos mucho más control sobre el evento que en los códigos vistos hasta ahora, aunque eso lo veremos la semana que viene. Pero, como digo, por el resto, incluir la función fuera o dentro es a gusto del consumidor, como lo vean más claro.
Anotar también que este código que hemos aprendido hoy no funcionará en Internet Explorer, así que tendremos que aprender un truco nuevo, que también veremos la semana que viene. Y sé que hoy el post ha sido corto, pero estos días no estoy teniendo demasiado tiempo, pero bueno, avanzamos sin pausa pero sin prisa.

EJERCICIO

Una vez más, el ejercicio de hoy va a ser repetir el último ejercicio, ahora usando este nuevo método. Recomendaría probarlo tanto poniendo la función dentro del "addEventListener" como fuera, para que se acostumbren a ambas maneras y vean cual les cuadra más.

No hay comentarios: