Cómo manejar eventos en JavaScript

Eventos en JavaScript

Un evento es la acción que desencadena el usuario al interactuar con una página web. Cuando ocurre un evento (hacer click, doble click, seleccionar..) podemos capturarlo mediante un manejador de eventos, es decir, una función asociada a ese evento.

El modelo de eventos forma parte del DOM (Document Object Model), que es una estructura jerárquica de objetos que genera el navegador cuando se carga una página. Esta estructura y contenidos se pueden cambiar dinámicamente con JavaScript. A través del DOM se puede acceder a cualquier elemento (objeto), cambiar sus propiedades o llamar a sus métodos.

Desde que Netscape 2.0 empezó a utilizar el DOM llamado nivel 0, ha ido evolucionando y hoy en día, la última especificación es de nivel 4. Hay que tener en cuenta que no todos los navegadores manejan eventos del mismo modo y existen hasta tres modelos diferentes dependiendo del navegador utilizado.

Vamos a empezar por el nivel básico o nivel 1 del DOM. Este modelo se introdujo para la versión HTML4, y aunque sus capacidades son limitadas, es el único soportado por todos los navegadores y en todos funciona del mismo modo. El nombre de cada evento se construye añadiendo el prefijo «on», seguido del nombre en inglés de la acción asociada al evento, como por ejemplo onclick se denomina al evento de hacer click.

Eventos del DOM Nivel 1

EVENTO	DESCRIPCIÓN	ELEMENTOS SOBRE LOS QUE ACTÚA
onblur	Deseleccionar un elemento	body, button, input, label, select, textarea
onchange	Deseleccionar un elemento modificado	input, select, textarea
onclick	Hacer click y soltar el ratón	Todos los elementos
ondblclick	Hacer doble click	Todos los elementos
onfocus	Seleccionar un elemento	body, button, input, label, select, textarea
onkeydown	Pulsar una tecla y mantenerla pulsada	body y elementos de formulario
onkeypress	Pulsar una tecla	body y elementos de formulario
onkeyup	Soltar una tecla pulsada	body y elementos de formulario
onload	Página cargada completamente	body
onmousedown	Pulsar un botón del ratón y mantenerlo pulsado	Todos los elementos
onmousemove	Mover el ratón	Todos los elementos
onmouseout	El ratón sale del elemento	Todos los elementos
onmouseover	El ratón entra en el elemento	Todos los elementos
onmouseup	Soltar el botón del ratón	Todos los elementos
onreset	Inicializar el formulario	form
onresize	Modificar el tamaño de la ventana	body
onselect	Seleccionar un texto	input, textarea
onsubmit	Pulsar enviar en un formulario
onunload	Cerrar la ventana del navegador	body

Cómo usar los eventos en JavaScript

1. Directamente como atributo XHTML del elemento

En el atributo onclick se ponen las instrucciones que se ejecutarán cuando se produzca ese evento, en este caso cuando se hace click con el ratón.

Ejemplo

<input type="button" value="Haz Click" onclick="alert('Hola qué tal');"/>

Con este otro método podemos acceder al elemento que desencadena el evento accediendo a la id del mismo.

Ejemplo

<input  id="boton" type="button" value="Haz Click" onclick="document.getElementById('boton').value='clickado';"/>

Podemos modificar los estilos de un documento del mismo modo

Ejemplo

<div id="caja" style="width:100px; height:60px; border:2px solid red" 
onmouseover="document.getElementById('caja').style.borderColor='blue';"
onmouseout="document.getElementById('caja').style.borderColor='red';">
    <!--Contenido del div-->
</div>

2. Usando la variable this.

El lenguaje JavaScript crea automáticamente una variable especial llamada this. En los eventos se puede usar esta variable para referirse al elemento XHTML que ha provocado el evento. Además de resultar un código más corto y fácil de entender que el anterior document.getElementById, aunque cambiemos el id del div funcionará igualmente.

Ejemplo

//Div original
<div id="contenido" style="width:200px; height:100px; border:solid yellow">
    <!--Contenido del div-->
</div>
<!--Modificar los estilos de un div sin utilizar la variable this-->
<div id="caja" style="width:200px; height:100px" onmouseover="document.getElementById('caja').style.borderColor='red';" onmouseout="document.getElementById('caja').style.borderColor='blue';">
    <!--Contenido del div-->
</div>
<!--Modificar los estilos utilizando la variable this-->
<div id="contenido" style="width:200px; height:100px; border:solid yellow" 
onmouseover="this.style.borderColor='red';" 
onmouseout="this.style.borderColor='blue';">
    <!--Contenido del div-->
</div>

3. Como funciones externas

Aunque el uso de los atributos XHTML para manejar eventos es la forma más rápida, sólo es recomendable cuando se añaden pocas instrucciones. La manera más aconsejable es usando una función externa y llamarla desde el elemento XHTML

Ejemplo

<script> 
    function saludo(){ 
        alert("Hola que tal"); 
    } 
</script> 
<input type="button" value="Haz Click" onclick="saludo()"/>

 4. Usando manejadores semánticos

Es una evolución de las funciones externas para manejar eventos. La gran ventaja de este método es que no se mezcla el código html con el JavaScript y el resultado es un código más limpio.

Ejemplo

<!--Declaración normal-->
<input type="button" id="saludo" value="Haz Click Aquí" onclick="alert('Hola qué tal');"/>
<!--Usando manejadores semánticos-->
<!--Declaración de la función muestraSaludo-->
function muestraSaludo() {
    alert("Hola qué tal");
}
<!--Asignamos la función externa al elemento. Sin paréntesis (), motivo común de errores.-->
document.getElementById("saludo").onclick = muestraSaludo;
<!--Asignamos un id al elemento XHTML-->
<input type="button" id="saludo" value="Haz Click Aquí"/>

Si queremos manejar eventos de varios elementos podemos usar clases en vez de ids

Ejemplo

<div class="cajas" style="width:100px; height:60px; border:2px solid red" 
onmouseover="document.getElementByClassName('cajas').style.borderColor='blue';"
onmouseout="document.getElementByClassName('cajas').style.borderColor='red';">
</div>

Evitar acciones por defecto de elemento XHTML

En JavaScript podemos controlar acciones como el envío de un formulario al pulsar submit o el cierre de una página cuando pulsamos la x de cerrar.

Lo podemos hacer directamente dentro del código html de este modo

Ejemplo

<!--Al poner return false se anula la acción por defecto del enlace a-->
<a href="tutobasico.com" onclick="salir(); return false">Salir</a>

Podemos hacerlo con una función externa

Ejemplo

<a href="tutobasico.com" onclick="return salir()">Salir</a>

function salir() {
    return confirm("¿Seguro que quieres salir?");
}

El inconveniente de utilizar las funciones del DOM es que hay que esperar que la página cargue completamente para que se construya todo el árbol de nodos. Para asegurarnos que esto sucede una buena práctica es meter todo el código que utilice funciones del DOM dentro de una función onload. De este modo nos aseguramos que no se ejecutará hasta que la página cargue completamente.

Ejemplo

window.onload = function{
  // Aquí el código
}