trisquel

Aprende JavaScript con ejemplos (XXIII). Manejadores de eventos / EventListeners.

Cuando ocurre un evento de un objeto del documento o página web, es posible con JavaScript asociarlo a una función.

Con el método addEventListener es posible realizar esto. Veamos un ejemplo de utilización:

<!DOCTYPE html>
<html>
<body>
<button id="unboton">Dale</button><p id="texto"></p>

<script>
function MuestraFecha() {
document.getElementById("texto").innerHTML = Date();
}
</script>

<button id="unboton">Dale</button>

<p id="texto"></p>

<script>
document.getElementById("unboton").addEventListener("click", MuestraFecha);
</script>

</body>
</html>

Como puedes observar, tenemos por un lado la función MuestraFecha() que le asigna al contenido HTML del elemento con id=texto la fecha actual.

Por otro lado tenemos el método addEventListener asociado al botón que hemos creado con identificador=unboton. Lo que hace ese método es asociar el evento “click” del botón con la función MuestraFecha.

Ejercicio 23.1:
Copia y ejecuta el ejemplo anterior. Modifícalo para añadir una segunda función al evento click (ahora el evento click tiene dos funciones).
Ejercicio 23.2:
Crea una página web que capture el evento de redimensionar la ventana por parte del usuario.
Ejercicio 23.3:
Crea una página web con un botón que capture los eventos click, mouseover y mouseout.
Ejercicio 23.4:
El método removeEventListener es capaz de eliminar un evento asociado a un elemento del documento.
Para el ejercicio 23.3 añade un segundo botón que vaya eliminando uno a uno los eventos asociados.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>