Javascript – #4.02. Modelo de eventos tradicional

En la lección anterior vimos cómo funcionaba el modelo de eventos en línea, o eventos en atributos HTML, que permitía incluir los eventos en Javascript directamente sobre la etiqueta HTML. Como ya viste anteriormente, esta opción no es la más indicada puesto que mezcla código en diferentes lenguajes dentro del mismo archivo.

En esta lección, por el contrario, trabajaremos con el modelo de eventos tradicional, que consiste en aplicar sobre un elemento seleccionado a través de Javascript, un evento de la forma “onnombreevento” (onclick, onmouseover, onblur…).

Desde el punto de vista de la organización, esta forma es mucho más correcta, ya que separa el código HTML del código Javascript.

Sin embargo, esta opción tampoco es la más recomendada, puesto que únicamente permite asociar un solo evento del mismo tipo a un elemento. Es decir, si hiciéramos lo siguiente:

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

Al hacer click sobre el párrafo con id “parrafo” únicamente se ejecutaría la función hazLoOtro().

Por eso la mejor opción es siempre utilizar el Modelo de eventos de W3C, que veremos en una lección posterior.

¡Recuerda! Aunque el modelo de eventos tradicional separa código Javascript de HTML, no permite asociar dos eventos del mismo tipo a un elemento… ¡utiliza el del W3C!

Tweet

De momento echa un ojo a este vídeo para ver cómo trabajar con el modelo de eventos tradicional.

¡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!