JAVASCRIPT: Eventos

Defición de Eventos en JavascriptSiguiendo con la visión general de Javascript, el post de hoy va a tratar sobre los Eventos.

En primer lugar la definición:

Los eventos son comandos que se usan para invocar instrucciones y hacen posible que los usuarios transmitan información a los programas. JavaScript define numerosos eventos que permiten una interacción completa entre el usuario y las páginas/aplicaciones web. La pulsación de una tecla constituye un evento, así como pinchar o mover el ratón, seleccionar un elemento de un formulario, redimensionar la ventana del navegador, etc.

El nombre de cada evento se construye mediante el prefijo on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.

Los más significativos:

  • onLoad: (al cargar la página)
  • onUnload: (al abandonar la página)
  • onMouseOver: (al pasar el ratón por encima)
  • onMouseOut: (al abandonar el ratón su posición actual)
  • onFocus:(al hacer clic en un campo de formulario)
  • onClick: (al hacer clic en un elemento)
  • onSubmit: (al enviar un formulario)

Los eventos, para poder interrelacionar HTML con Javascript, no se definen en la marca <SCRIPT> (excepto en algún caso), sino que se insertan dentro de las marcas HTML: el navegador compatible con Javascript, al encontrarse con un evento, lo interpreta y lo activa.

He aquí un ejemplo:

<A HREF=”pagina.html” onclick=”alert(‘hola’)”>Link</A>

Otro ejemplo:

La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al abandonarla.

<HTML>
<HEAD>
<TITLE>Ejemplo onLoad y onUnload</TITLE>
</HEAD>
<BODY onLoad=”alert(‘¡Bienvenido a mi página!’)” onUnload=”alert(‘¡Vuelva pronto!‘)”>

</BODY>
</HTML>

Los eventos, además, se pueden también activar directamente dentro de los script, invocándose como si fueran una propiedad del objeto. La sintaxis es: Objeto.evento=handler; 

HTML>
<HEAD><TITLE>Eventos</TITLE>
<SCRIPT>
<!–
function Reacciona(campo) {
alert(“¡Introduzca un valor!”)
campo.focus()
}
//–>
</SCRIPT></HEAD>
<BODY> <FORM METHOD=POST>
<INPUT TYPE=text NAME=campo onFocus=”Reacciona(this)“>
</FORM> </BODY> </HTML>

Fuente: Formación IBM: Desarrollo web profesional: Ciclo y herramientas
Post: Diana Redondo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s