Eventos en javascript

Los eventos son uno de los pilares de la interactividad web, acciones que se ejecutan como respuesta a una interacción del usuario, permitiendo la creación de webs dinámicas.

Existe multitud de eventos, algunos dependientes del usuario, como los que se ejecutan ante un click (evento onClick), otros tiene como condición algo ajeno al usuario, como es la carga de la página con el evento onLoad.

Registro de eventos en línea

El uso de los eventos dispone ya de un amplio historial de evoluciones, una de sus primeras implementaciones fue la que se conoce como «netscape», por estar enfocada hacia su navegador, se conocen también como registro de eventos en línea.

Su uso:

//Disponemos de un trigger en el código HTML y la llamada a su evento
<a href="pagina.html" onClick="alert('Has pulsado en el enlace')">Pulsa aquí</a>

//ó

<a href="pagina.html" onClick="alertar()">Pulsa aquí</a>
//siendo la función alertar() almacenda en un archivo JavaScript
function alertar(){
 alert("Has pulsado en el enlace");
}

Esto plantea un gran problema y es que el desarrollo web tiende hacia la abstracción de sus elementos, y la inclusión del javaScript dentro de la estructura de la propia página no estaba bien visto, por eso se dio paso a modelos alternativos de eventos, considerando el registro de eventos en línea como una mala práctica.

Modelo de registro de eventos tradicional

La problemática del modelo en línea fue solventada en el modelo tradicional por primera vez, pasó a ser posible asignar eventos a los elementos del DOM y ejecutarlos directamente desde el código javascript, lo que separa el mismo de la estructura.

Este modelo es aceptado todavía por los navegadores, sin embargo, nunca fue aceptado como estándar por la W3C.

//Se ejecuta del siguiente modo:

elemento.onclick = ejecutarAccion();

//Se anula del siguiente modo:

elemento.onclick = null;

Modelo de registro avanzado de eventos según la W3C

En la especificación del DOM de la W3C, se pone especial interés en la problemática de los eventos en línea, se ofrece, como solución, una forma sencilla de registrar los eventos sobre un objeto determinado, este sistema gira en torno al addEventListener(), escuchadores de eventos.

un addEventListener tiene tres argumentos de entrada:

El tipo de evento.
La función a ejecutar.
Un valor booleano (true o false): Indica si el evento se ejecuta en fase de captura (true) o propagación (false).

elemento.addEventListener('evento', función, false|true);

Un ejemplo:

//Creamos un evento que se acciona con un click sobre el enlace "mi enlace" y se ejecuta en propagación.

document.getElementById("mienlace").addEventListener('click',alertar,false);
function alertar(){
 alert("Te conectaremos con la página: "+this.href);
}

Importante: en el modelo de registro de evento de la W3C, usando listeners los eventos no utilizan «on» antes del evento.

Para eliminar un elemento utilizamos el removeEventListener():

elemento.removeEventListener('evento', función, false|true);

Usando los otros modelos de registro, podemos ver qué eventos tiene asociado un elemento con element.onclick, que devolverá undefined si no tiene ninguno y el nombre de la función si existe. El modelo W3C no permite esto, sin embarga ofrece el método eventListenerList que almacena una lista de las funciones registradas para un elemento.

Si queremos evitar el comportamiento por defecto de un objeto, disponemos del preventDefault().