Eventos

Curso Diseño y Programación Páginas Web: Introducción a la Programación con Javascript

En este apartado vamos a explicar un concepto fundamental en Javascript para proporcionar interactividad a nuestra página: los eventos.

Con los eventos podemos detectar acciones que los usuarios realizan con nuestra página web (cargarla o abandonarla, pinchar un enlace o un botón, seleccionar o pasar con el ratón por encima de un elemento de la página, introducir un dato en un formulario,…) y reaccionar ante esa acción ejecutando un script.

Hay diversas maneras de implementar los eventos en una página HTML con Javascript. Vamos a ver algunas formas de manejarlos:

**Evento inline como atributo interno de HTML**

Es la forma más sencilla de crear un evento, pero también la más desaconsejada, ya que mezclamos código HTML con Javascript con los inconvenientes que eso crea. En cualquier caso al ser la forma más directa, nos sirve para comprender mejor el concepto de evento, además de que es interesante conocerla por lo mucho que se ha utilizado (aún hoy se sigue empleando bastante)

Un ejemplo que puedes probar en el editor online (lo hemos escrito de dos maneras distintas). Verás que al pulsar el enlace, nos muestra un mensaje:

<a href="#" onClick="document.write('Frase ejemplo escrita con un evento inline');">Haz clic aquí</a>

1	<a href="#" onClick="document.write('Frase ejemplo escrita con un evento inline');">Haz clic aquí</a>

<a href="JavaScript:void(0)" onClick="document.write('Frase ejemplo escrita con un evento inline');">Haz clic aquí</a>

1	<a href="JavaScript:void(0)" onClick="document.write('Frase ejemplo escrita con un evento inline');">Haz clic aquí</a>

Unas aclaraciones a estas sentencias:

El evento ‘onClick’ es el evento que ‘vigila’ cuando pinchamos con el ratón en un elemento. Al hacerlo, se ejecuta la sentencia (o sentencias) que tiene asociadas, en este caso un document.write.
Es indiferente el uso de minusculas-mayúsculas al escribir «onClick». Podríamos poner ‘onclick’, ‘ONCLICK’, ‘onCLICK’ o cualquier otra combinación. Normalmente lo verás con la notación ‘camel-case’ (inicio 2ª palabra en mayúscula’ o todo en minúsucula
En el atributo ‘href’, en vez de enviar a una URL ‘normal’, en el primer ejemplo enviamos a la misma página, y en el segundo simplemente no hace nada. Es lo que queremos, ya que la acción que buscamos es que se ejecuten las instrucciones asociadas al evento onclick, no irnos a otra página web.
Debemos ser cuidadosos con las comillas. La instrucción Javascript, document.write en este caso, debe ir entre dobles comillas («) y el texto que se va a imprimir con comilla simple (‘). No podemos emplear doble comillas («) para ese texto.

En este caso del evento onclik, es más habitual utilizar un botón o incluso una imagen, en vez de un enlace. Por ejemplo:

<button onclick="document.write('Frase ejemplo escrita con un evento inline')";>Haz clic!</button>

1	<button onclick="document.write('Frase ejemplo escrita con un evento inline')";>Haz clic!</button>

Para un evento inline del tipo ‘onclick’ que hemos presentado, es preferible usar una función en vez de introducir las sentencias directamente en el atributo onclick. Desacopla (separa) más el código HTML y Javascript y le da más claridad, sobre todo si son varias sentencias, pero sigue siendo una forma poco recomendada de manejar eventos.

Por ejemplo, creamos un botón y al pincharlo, este llama a una función llamada ‘mensaje’:

<p>Pulsa el botón, y te aparecerá una ventana pop-up y luego un párrafo con texto</p>

<button onclick="mensaje()">¡Haz clic!</button>

<script>
function mensaje() {
alert("Evento onclick");
document.write("Hola, esta línea la hemos escrito con un evento Javascript");
}
</script>

<p>Pulsa el botón, y te aparecerá una ventana pop-up y luego un párrafo con texto</p>

function mensaje() {

alert("Evento onclick");

document.write("Hola, esta línea la hemos escrito con un evento Javascript");

}

</script>

Hay muchos eventos que podemos emplear. Algunos ejemplos (usamos notación ‘camel-case’ para hacer más claros sus nombres)

onLoad: carga completa de la página HTML. Se emplea mucho como control, para no ejecutar ningún script antes de que todos los elementos hayan sido procesados por el navegador, ya que podrían fallar.
onMouseOver: mover el ratón por encima de algún elemento de la página.
Si en el ejemplo anterior sustituyes ‘onclick’ por ‘onmouseover’ en el editor online, al dar ‘ver resultado’ comprobarás que solo tienes que pasar el ratón por encima del botón para que salga la alerta y luego el texto. También puedes probar por ejemplo a añadir otro párrafo con el evento: <p onmouseover="mensaje()">Pasa el ratón por esta frase</p>
onSubmit: enviar un formulario

Aquí puedes consultar una lista con los eventos más utilizados

Evento semánticos: añadir atributos al elemento

Una manera de desacoplar más el contenido HTML del código Javascript que proporciona la funcionalidad para hacer interactiva la página, es la siguiente:

<p>Pincha en cualquier parte de este recuadro resultado</p>
 
<script>
document.onclick = mensaje

function mensaje() {
document.write("Hola, esta línea la hemos escrito con un evento Javascript");
}
</script>

<p>Pincha en cualquier parte de este recuadro resultado</p>

document.onclick = mensaje

function mensaje() {

document.write("Hola, esta línea la hemos escrito con un evento Javascript");

}

</script>

En este caso hemos asociado un evento (onclick) al elemento ‘document’ y enlazado a la función ‘mensaje’. Sigue siendo desaconsejable porque si asignamos después otra función en nuestro código (por ejemplo: document.onclick = otroMensaje ) sobreescribirá la primera.

Algunas aclaraciones a la línea document.onclick = mensaje de este script ejemplo:

‘document’ es un objeto y contiene toda la página HTML. Lo explicaremos en el próximo apartado
El evento debemos escribirlo todo en minúsculas
La función la debemos escribir sin los paréntesis finales

Este método es muy utilizado en combinación con las funciones que seleccionan elementos de la página gracias al DOM. Lo veremos en los dos apartados siguientes.

Método addEventListener: enlace cola de eventos

El tercer caso es algo más ‘abstracto’, pero es el más recomendado cuando vamos dominando la programación Javascript ya que evita los problemas de los anteriores.

No vamos a entrar en él al ser algo más avanzado, pero para los más que quieran conocerlo pueden consultar este video de nuestro curso de Javascript y jQuery