Eventos JS

Modelo básico de eventos

onblur

Deseleccionar el elemento

<button>, <input>, <label>,<select>, <textarea>, <body>

onchange

Deseleccionar un elemento que se hamodificado

<input>, <select>, <textarea>

onclick

Pinchar y soltar el ratón

Todos los elementos

ondblclick

Pinchar dos veces seguidas con el ratón

Todos los elementos

onfocus

Seleccionar un elemento

<button>, <input>, <label>,<select>, <textarea>, <body>

onkeydown

Pulsar una tecla (sin soltar)

Elementos de formulario y <body>

onkeypress

Pulsar una tecla

Elementos de formulario y <body>

onkeyup

Soltar una tecla pulsada

Elementos de formulario y <body>

onload

La página se ha cargadocompletamente

<body>

onmousedown

Pulsar (sin soltar) un botón del ratón

Todos los elementos

onmousemove

Mover el ratón

Todos los elementos

onmouseout

El ratón "sale" del elemento (pasa porencima de otro elemento)

Todos los elementos

onmouseover

El ratón "entra" en el elemento (pasapor encima del elemento)

Todos los elementos

onmouseup

Soltar el botón que estaba pulsado enel ratón

Todos los elementos

onreset

Inicializar el formulario (borrar todossus datos)

<form>

onresize

Se ha modificado el tamaño de laventana del navegador

<body>

onselect

Seleccionar un texto

<input>, <textarea>

onsubmit

Enviar el formulario

<form>

onunload

Se abandona la página (por ejemplo alcerrar el navegador)

<body>

Cada elemento o etiqueta XHTML define su propia lista de posibleseventos que se le pueden asignar

Los scripts se dedican a esperar a que el usuario "haga algo" (que pulse una tecla, que mueva el ratón, que cierre la ventana del navegador). A continuación, el script responde a la acción del usuario normalmente procesando esa información y generando un resultado.

Manejadores de eventos

Manejadores como atributos de los elementos XHTML

En este caso, el código se incluye en un atributo del propio elemento XHTML

r

<input type="button" value="Pinchame y verás" onclick="alert('Gracias porpinchar');" />

Manejadores como funciones JavaScript externas

Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario,es aconsejable agrupar todo el código JavaScript en una función externa y llamar a estafunción desde el elemento XHTML.

r

function muestraMensaje() {alert('Gracias por pinchar');}<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />

El principal inconveniente de este método es que en las funciones externas no se puedeseguir utilizando la variable this y por tanto, es necesario pasar esta variable comoparámetro a la función

r

function resalta(elemento) {switch(elemento.style.borderColor) {case 'silver':case 'silver silver silver silver':case '#c0c0c0':elemento.style.borderColor = 'black';break;case 'black':case 'black black black black':case '#000000':elemento.style.borderColor = 'silver';break;}}<div style="width:150px; height:60px; border:thin solid silver"onmouseover="resalta(this)" onmouseout="resalta(this)">Sección de contenidos...</div>

Manejadores "semánticos"

Se basa en utilizar las propiedades DOM de los elementos XHTML para asignar todas lasfunciones externas que actúan de manejadores de eventos

r

// Función externafunction muestraMensaje() {alert('Gracias por pinchar');}// Asignar la función externa al elementodocument.getElementById("pinchable").onclick = muestraMensaje;// Elemento XHTML<input id="pinchable" type="button" value="Pinchame y verás" />

Técnica

r

document.getElementById("pinchable").onclick = muestraMensaje;

Asignar un identificador único al elemento XHTML mediante el atributo id

Crear una función de JavaScript encargada de manejar el evento

Asignar la función externa al evento correspondiente en el elemento deseado

Si se añaden los paréntesis después del nombre de la función, en realidad se estáejecutando la función y guardando el valor devuelto por la función en la propiedadonclick de elemento.

r

// Asignar una función externa a un evento de un elementodocument.getElementById("pinchable").onclick = muestraMensaje;// Ejecutar una función y guardar su resultado en una propiedad de un elementodocument.getElementById("pinchable").onclick = muestraMensaje();

La gran ventaja de este método es que el código XHTML resultante es muy "limpio", yaque no se mezcla con el código JavaScript

El único inconveniente de este método es que la página se debe cargar completamenteantes de que se puedan utilizar las funciones DOM que asignan los manejadores a loselementos XHTML.

Una de las formas más sencillas de asegurar que cierto código se va aejecutar después de que la página se cargue por completo es utilizar el evento onload

r

window.onload = function() {document.getElementById("pinchable").onclick = muestraMensaje;}

Variable this

En los eventos, se puede utilizar la variable this para referirse al elemento XHTML que ha provocado el evento

r

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"onmouseover="document.getElementById('contenidos').style.borderColor='black';"onmouseout="document.getElementById('contenidos').style.borderColor='silver';">Sección de contenidos...</div>El código anterior es demasiado largo y demasiado propenso a cometer errores.<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"onmouseover="this.style.borderColor='black';"onmouseout="this.style.borderColor='silver';">Sección de contenidos...</div>