Cómo manejar 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 DOM Nivel 1

Cómo manejamos estos eventos

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.

<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.

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

Podemos modificar los estilos de un documento del mismo modo

<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.

//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

<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.

//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

<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 las acciones por defecto de un 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

//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

<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.

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

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo