Cuando estamos diseñando nuestra página HTML podemos apoyarnos en el modelo de eventos para poder gestionar la interacción con el usuario. Controlar cuando pulse sobre un sitio, cuando pase por un elemento, al entrar/salir sobre zonas,…
Así tendremos líneas de código como la siguiente:
En ella estamos diciendo que cuando haya un click, evento onClick, se ejecute el método «mifuncion».
De esta forma podemos codificar muchos más eventos onbur, onchange, onfocus, onkeydown,…
Pero mediante JavaScript, podemos modificar «en caliente» la gestión de eventos de los elementos de la página y así crear un evento y asociarselo a un elemento de la página.
En nuestro caso vamos a tener una lista de textos. Lo que vamos a hacer es asociarles un evento onClick. De tal manera, que cuando se produzca dicho evento, mostraran el contenido del texto.
Lo primero es crear la lista de elementos:
- Avila
- Salamanca
- Zamora
- León
- Soria
- Valladolid
- Burgos
- Segovia
- Palencia
Ahora, ejecutaremos el código JavaScript para añadir un evento a cada uno de los elementos.
En dicho código diferenciaremos dos partes. La primera lo que hace es recuperar una referencia a la lista y recorrer todos los elementos que la contienen. Por cada elemento llamaremos al método crearEvento, el cual veremos en detalle más adelante.
Para poder acceder a la lista nos apoyaremos en los métodos .getElementById, que nos posiciona en un elemento y en .getElementsByTagName, que nos devuelve una lista de elementos dada una etiqueta. En nuestro caso la etiqueta li.
El código JavaScript será el siguiente:
// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
var elementos = document.getElementById("frases").getElementsByTagName("li");
// Recorremos todos los elementos
for (var i=0; i<elementos.length; i++) {
// Añadimos el evento onclick al div
crearEvento(elementos[i], "click", function(){
// Hacemos que muestre el contenido del DIV
alert(this.innerHTML);
});
}
Como vemos por cada elemento llamamos a la función crearEvento, pasándole el elemento, el evento a crear y la función a asociarle.
Para crear un evento sobre un elemento tenemos el método .addEventListener. Esta es la función utilizada por el DOM. Pero para el caso del Internet Explorer deberemos de utilizar el método .attachEvent. Ambos métodos los ejecutaremos sobre el elemento.
Hay que indicar que para .addEventListener el nombre del evento será sin anteponerle el «on», mientras que para .attachEvent si que le antepondremos el «on».
De esta forma, la función JavaScript para crear un evento sobre un método quedará de la siguiente forma:
function crearEvento(elemento, evento, funcion) {
if (elemento.addEventListener) {
elemento.addEventListener(evento, funcion, false);
} else {
elemento.attachEvent("on" + evento, funcion);
}
}
