Definición de evento

Evento digamos que es el desencadenante de la acción. Quien puede desencadenar la acción, pueden ser:

  • El usuario, al hacer click por ejm (onClick)
  • El sistema al cargar el documento Window.onload que lo que hace que es cuando la ventana se cargue, desencadene una acción)

Un manejador de evento es aquel código (Javascript) que maneja o procesa el evento.

Formas de construir manejadores de eventos

Son varias las formas que tenemos.

  • Manejadores de eventos en línea (práctica obsoleta y poco recomendable). Para construir un manejador en línea siempre hay que escribir la palabra on delante del evento que vamos a manejar, ejm, si queremos controlar el evento click, escribiremos onclick.
  • Manejadores de eventos como propiedades: sería crear manejadores de eventos o bien en un documento Javascript externo, o bien dentro de nuestro head en la misma página HTML.
  • Método addEventListener(): actualmente es la práctica más recomendada. Dicho método puede desencadenar varias acciones.

addEventListener()

El método va a tener 3 argumentos:

  • Nombre del evento
  • Función a ejecutar
  • Valor booleano

Veamos un ejm

<!DOCTYPE html>
<html lang="es">
    <head>
      <title>Ejm 03</title>
      <script>
        function tipoflor(){
            alert("Pensamientos");
        }
        function daTipoFlor(){
            var imagen=document.getElementsByTagName("img")[0];
            imagen.addEventListener("click",tipoflor,false);    
        }
        window.onload=daTipoFlor;
      </script>
    </head>
    <body>
        <p><img src="imagenes/flor1.jpg" />
    </body>
</html>

Ventajas a la hora de utilizar addEventListener()

Una de las ventajas que tiene es que un mismo objeto puede desencadenar varios eventos, es decir, que al hacer clic haga una cosa, y al hacer mouseover haga otra.

<!DOCTYPE html>
<html lang="es">
    <head>
      <title>Ejm 03</title>
      <script>
        var imagen;
        function tipoflor(){
            alert("Pensamientos");
        }
        function manejaflor(){
            imagen=document.getElementsByTagName("img")[0];
            imagen.addEventListener("mouseover",crecer,false); 
            imagen.addEventListener("mouseout",menguar,false);  
            imagen.addEventListener("click",tipoflor,false); 
        }
        function crecer(){
            imagen.width=225;
            imagen.height=225;
        }
        function menguar(){
            imagen.width=100;
            imagen.height=100;
        }
        window.onload=manejaflor;
      </script>
    </head>
    <body>
        <p><img src="imagenes/flor1.jpg" />
    </body>
</html>