Ir directamente al contenido de esta página
A diferencia de los ejemplos anteriores, no he empleado en el marcado ningún onclick
.
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
(cc) CodexExempla.org, 2007–2024 Mapa del sitio | XHTML | CSS | AA