Crear eventos con JavaScript

29/Sep/2007 JavaScript , , , , , , 4 Comentarios

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:

  1. <input type="text" onClick="mifuncion()" value="boton">

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:

  1. <ul id="frases">
  2. <li>Avila</li>
  3. <li>Salamanca</li>
  4. <li>Zamora</li>
  5. <li>León</li>
  6. <li>Soria</li>
  7. <li>Valladolid</li>
  8. <li>Burgos</li>
  9. <li>Segovia</li>
  10. <li>Palencia</li>
  11. </ul>

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:

  1. // Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
  2. var elementos = document.getElementById("frases").getElementsByTagName("li");
  3. // Recorremos todos los elementos
  4. for (var i=0; i<elementos.length; i++) {
  5. // Añadimos el evento onclick al div
  6. crearEvento(elementos[i], "click", function(){
  7. // Hacemos que muestre el contenido del DIV
  8. alert(this.innerHTML);
  9. });
  10. }

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:

  1. function crearEvento(elemento, evento, funcion) {
  2. if (elemento.addEventListener) {
  3. elemento.addEventListener(evento, funcion, false);
  4. } else {
  5. elemento.attachEvent("on" + evento, funcion);
  6. }
  7. }

Vídeos sobre Javascript


4 comentarios en “Crear eventos con JavaScript”

Víctor Cuervo

AnonimusIz

Hola es que quiero conocer como hacer por ejemplo que tengo 4 divs y cada uno con su checkbox pero quiero que los effectos que tengo en css a cada uno de esos divs se hagan seleccionando el checkbox y utilizando un select para seleccionar que effecto quiero que mueva ese div, sera que algunó me puede ayudar muchisimas gracias….

Víctor Cuervo

katie

hola … perdon quiero que me ayuden para creear eventos y seleccionar a todos mis contactos.. muchas gracias

Víctor Cuervo

David

Me pueden ayudar con una interrogante se puede crear una funcion Javascript en la cual se incluya codigo jsp el cual devolvera un tipo de dato ResultSet para luego validar este resultado dentro de la misma funcion javascript ejemplo:

function validar(x)
{

alert(‘Error’);

}

Víctor Cuervo

Pat

No funciona con IE 6.02, muestra como resultado “undefined”

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*