Curso de Javascript 1.2

En esta página:


Eventos

Un evento, como su mismo nombre indica, es algo que ocurre. Para que una rutina nuestra se ejecute sólo cuando suceda algo extraño deberemos llamarla desde un controlador de eventos. Estos controladores se asocian a un elemento HTML y se incluyen así:

 
<A HREF="http://home.netscape.com" onMouseOver="MiFuncion()">

Lista de eventos

Aquí tienes una pequeña guía de eventos definidos en JavaScript. Para más información, lee la guía de Netscape.
Evento Descripción Elementos que lo admiten
onLoad Terminar de cargarse una página <BODY...>
<FRAMESET...>
onUnLoad Salir de una página (descargarla) <BODY...><FRAMESET...>
onMouseOver Pasar el ratón por encima <A HREF..>
<AREA...>
onMouseOut Que el ratón deje de estar encima <A HREF..>
<AREA...>
onSubmit Enviar un formulario <FORM...>
onClick Pulsar un elemento <INPUT TYPE="button, checkbox, link, radio"...>
onBlur Perder el cursor <INPUT TYPE="text"...>
<TEXTAREA...>
onChange Cambiar de contenido o perder el cursor <INPUT TYPE="text"...>
<TEXTAREA...>
onFocus Conseguir el cursor <INPUT TYPE="text"...>
<TEXTAREA...>
onSelect Seleccionar texto <INPUT TYPE="text"...>
<TEXTAREA...>

Como ejemplo, vamos a hacer que una ventana aparezca automáticamente en cuanto pasemos un cursor por encima de un elemento <A> (e impidiendo, de paso, que quien esté viendo la página pueda hacer uso del mismo).

 eventos.html 
<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Los comentarios esconden el código a navegadores sin JavaScript
    function Alarma() {
      alert("No me pises, que llevo chanclas");
      return true;
    }
  // -->
  </SCRIPT>
</HEAD>
<BODY>
<A HREF="eventos.html" onMouseOver="Alarma()">
  Pasa por aquí encima
</A>
</BODY>
</HTML>

Y aquí está nuestro ejemplo funcionando:

Pasa por aquí encima

Definición mediante código

Hemos visto como declarar un controlador de eventos desde etiquetas HTML. Sin embargo, y desde las versiones 3 de Netscape y 4 de Explorer, existe otro modo de hacerlo mediante código.

Muchos objetos cuyas etiquetas HTML correspondientes permiten atributos que definen controladores de evento, permiten el acceso a dichos controladores por medio de propiedades con el mismo nombre. Por ejemplo, la página:

 load1.html 
<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Los comentarios esconden el código a navegadores sin JavaScript
    function Alarma() {
      alert("Hola");
    }
  // -->
  </SCRIPT>
</HEAD>
<BODY onLoad="Saludo()">
...
</BODY>
</HTML>

Se puede reescribir como:

 load2.html 
<HTML>
<HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!-- Los comentarios esconden el código a navegadores sin JavaScript
    function Saludo() {
      alert("Hola");
    }
    window.onload = Saludo;
  // -->
  </SCRIPT>
</HEAD>
<BODY>
...
</BODY>
</HTML>