Javascript – #4.03. Modelo de eventos del W3C

Lección
Materiales

En las lecciones anteriores trabajamos con el modelo de eventos en línea, o eventos en atributos HTML, y también el modelo de eventos tradicional.

Aunque ambos son perfectamente válidos, el primero no es recomendable porque mezcla código Javascript con HTML, y tanto el primero como el segundo no permiten asignar a un mismo elemento más de un evento.

Esto lo podemos suplir con el modelo de eventos del W3C. Este modelo trabaja con lo que definiríamos como escuchadores de eventos. Para que te hagas una idea es como poner a los elementos HTML que queramos un «sensor» que detecta cada vez que hacemos clic. O un «sensor» cada vez que ponemos el ratón encima. Y luego decidimos qué hacer cada vez que ocurra eso, es decir, qué función ejecutar.

Para añadir esos escuchadores de eventos, utilizamos el método addEventListener con dos o tres atributos: el primero lleva el nombre del evento que estamos «escuchando», el segundo la función (que puede ser anónima o no) y el tercero, opcional, tiene que ver con la fase de burbujeo (que ya os explicaré en otra lección en qué consiste). La sintaxis es la siguiente:

elemento.addEventListener("<evento_sin_on>",<funcion>,<false|true>);

En el modelo de eventos tradicional no es posible hacer esto:

document.getElementById("parrafo").onclick = hazEsto;
document.getElementById("parrafo").onclick = hazLoOtro;

Sin embargo, en el modelo de eventos del W3C podríamos asignar dos funciones diferentes cada vez que hacemos clic sobre el elemento con id=»párrafo» de la siguiente manera:

document.getElementById("parrafo").addEventListener("click", hazEsto);
document.getElementById("parrafo").addEventListener("click", hazLoOtro);

Por eso la mejor opción es siempre utilizar el modelo de eventos de W3C. En el siguiente vídeo te explico cómo trabajar con él sobre diferentes elementos y ejecutar funciones anónimas.

Javascript – #4.03. Modelo de eventos del W3C

¡Consulta en la pestaña Materiales el código fuente trabajado en la lección!

¿No te ha quedado claro? ¿Quieres aportar tu punto de vista? ¡Deja tu comentario!

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!