A diferencia de los ejemplos anteriores, no he empleado en el marcado ningún onclick.

Un ejemplo del uso de `addEventListener`

Este ejemplo no funciona en Internet Explorer, por motivos que veremos de vuelta al curso.

Lo que quiero conseguir es que cuando el usuario pinche sobre un div se lance una alerta. Al modo de la vieja escuela, lo que habría marcado es algo como esto:


    <div id="zona-interactiva" onclick="alerta()">
        <p>Elemento interactivo</p>
    </div>

Pero como scripter iluminado, dejo simplemente


    <div id="zona-interactiva">
        <p>Elemento interactivo</p>
    </div>

y el comportamiento que programo es el siguiente:


    window.onload = function (){
        document.getElementById('zona-interactiva').addEventListener('click',alerta,false);
    }

Incluyo la escucha en una función anónima —una a la que no se asigna nombre; lo hago así porque sé que no voy a hacer referencia a ella, ya que sólo la necesito una vez, cuando ocurra el evento de carga de todo el contenido del documento— y la vinculo al onload del objeto window para asegurarme de que el script no empiece a buscar el elemento zona-interactiva cuando aún no existe. Si no lo hiciera así, al cargarse la línea document.getElementById('zona_interactiva')… se ejecutaría inmediatamente y generaría un error, porque aún no se habría cargado la parte del documento donde existe el elemento objetivo.

Y aquí puede comprobarse el resultado:

Haga clic en este elemento para lanzar la alerta

Volver al curso

Un ejemplo del uso de addEventListener

Un ejemplo del uso de `addEventListener`