En este nuevo modelo tenemos una función fundamental llamada AddEventListener() se registra un evento a un objeto en específico. El Objeto especifico puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest. Para registrar más de un eventListener, puedes llamar addEventListener() para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.

¿Porqué utilizar addEventListener?

addEventListener es la forma de registrar un oyente de eventos, como se especifica en W3C DOM. Sus beneficios son los siguientes:

Permite agregar mas de un oyente a un solo evento. Esto es particularmente útil para las librerias DHTML o las Extensiones de Mozilla que deben funcionar bien, incluso si se utilizan otras librerias / extensiones.
Da un control mas detallado de la fase en la que el listener se activa (capturando vs burbujeando)
Funciona en cualquier elemento del DOM, no únicamente con elementos de HTML.

Sintaxis

target.addEventListener(tipo, listener[, useCapture]);

tipo Una cadena representando el tipo de evento a escuchar.
listener El objeto que recibe una notificación cuando un evento de el tipo especificado ocurre. Debe ser un objeto implementando la interfaz EventListener o solo una función en JavaScript.
useCapture Opcional Si es true, useCapture indica que el usuario desea iniciar la captura. Después de iniciar la captura, todos los eventos del tipo especificado serán lanzados al listener registrado antes de comenzar a ser controlados por algún EventTarget que esté por debajo en el arbol DOM del documento.

Esta función la tienen incorporada casi todos los objetos del DOM (recordemos nuestro árbol)
Para llamarla debemos hacerla a partir de la referencia de un objeto y pasarle tres parámetros:

-El nombre del evento que queremos capturar (load,click,unload etc.)
-El nombre de la función que se dispara cuando se produce el evento.
-El tercer parametro un valor boolean que por ahora le pasaremos el valor false.

Para ver como capturamos el evento load confeccionaremos el problema que ya habiamos realizado con el modelo antiguo de eventos.

<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
window.addEventListener('load',ventanaBienvenida,false);
function ventanaBienvenida(e)
{
  alert("Bienvenido a este sitio.");
}
</script>
</head>
<body>
Este sitio utiliza el modelo de eventos propuestos por el W3C.
</body>
</html>

Ver ejemplo anterior

El área de javascript se verá así:

window.addEventListener('load',ventanaBienvenida,false);

function ventanaBienvenida(e)
{
  alert("Bienvenido a este sitio.");
}

Lo primero que podemos observar es que no hay ninguna llamada a funciones JavaScript en el archivo HTML,

Lo más importante está ahora ubicado en el fuera de cualquier función, es decir se ejecuta cuando comienza a cargarse la página es la llamada de la función addEventListener a partir del objeto window (recordemos que este objeto se crea automáticamente):

window.addEventListener('load',ventanaBienvenida,false);

Le pasamos como referencia el evento que queremos capturar (load), debe ir entre comillas y el segundo parámetro es la función que debe ejecutarse cuando se dispare el evento load y false en el tercer parámetro.

Es importante tener en cuenta que el nombre de la función no debe llevar paréntesis de apertura y cerrado, es decir es incorrecto pasar ventanaBienvenida(), esto es debido a que en realidad no estamos llamando a la función sino estamos pasando la dirección de la función para que el objeto window la llame en su debido momento.

Donde codificamos la función debemos indicar un parámetro que contiene información útil con respecto al evento que se a disparado (si bien en este problema no lo utilizamos en otros problemas será de vital importancia)

Podemos obviar antecederle el nombre del objeto window:

addEventListener('load',ventanaBienvenida,false);

(adsbygoogle = window.adsbygoogle || []).push({});

Evento load y unload (DOM).

¿Porqué utilizar addEventListener?