JAVASCRIPT: Manejador de eventos

JavaScript: Manejador de Eventos

Un manejador de eventos o Handler es un trozo de código Javascript que actúa en respuesta a un evento generado sobre un elemento HTML

Para definir un manejador de eventos se debe agregar a la etiqueta el atributo correspondiente al evento que se desea atender. El código JavaScript va entre comillas como el valor del atributo. La sintaxis general es:

<Etiqueta manejador="Código JavaScript">

Donde Etiqueta es un  HTML y manejador es el nombre del manejador de eventos. Como Código JavaScript se puede incluir un conjunto de sentencias separadas por punto y coma (;), aunque típicamente se incluye la invocación a una función.

Por ejemplo si se dispone de una función JavaScript denominada calcula, se puede incorporar el llamado a esta función cuando el usuario haga click sobre un botón de la siguiente manera:

<input type="button" value="Calcular" onClick="calcula(this.form)">

Todos los manejadores funcionan de la misma manera: evalúan la acción de un usuario y entonces llaman a un script que ejecuta el código pero no en el momento de ejecutar la carga de la página web sino cuando se genera el evento.

Esta forma de incluir código Javascript permite modificar un documento HTML en función de la interacción del usuario

Un ejemplo del Evento load:

  • Ocurre: cuando se finaliza la carga de una página o de una imagen
  • Manejador: onLoad
  • Se aplica: a las etiquetas <BODY> e <IMG>


<HTML>
<HEAD>
<TITLE>JavaScript: Evento ’load’</TITLE>
</HEAD>
<BODY onLoad=”alert(’Evento load en BODY’)”>
<H1>JavaScript: Evento ’load’</H1>
<IMG src=”simpsons.jpg”
onLoad=”alert(’Evento load en IMG’)”>
</BODY>
</HTML>

 

 

Otro Ejemplo: Evento unload

  • Ocurre: cuando se sale de una página a través de un enlace
  • Manejador: onUnload
  • Se aplica: a la etiqueta <BODY>
<HTML>
<HEAD>
<TITLE>JavaScript: Evento ’unload’</TITLE>
</HEAD>
<BODY onUnload=”alert(’Evento unload’)”>
<H1>JavaScript: Evento ’unload’</H1>
<A href=”http://www.cs.us.es”>CCIA</A&gt;
</BODY>
</HTML>
Lista de los manejadores de eventos más habituales del lenguaje Javascript, junto con una descripción de cada uno:

onAbort
Este evento se produce cuando un usuario detiene la carga de una imagen, ya sea porque detiene la carga de la página o porque realiza una acción que la detiene, como por ejemplo irse de la página.
Javascript 1.1

onBlur
Se desata un evento onblur cuando un elemento pierde el foco de la aplicación. El foco de la aplicación es el lugar donde está situado el cursor, por ejemplo puede estar situado sobre un campo de texto, una página, un botón o cualquier otro elemento.
Javascript 1.0

onChange
Se desata este evento cuando cambia el estado de un elemento de formulario, en ocasiones no se produce hasta que el usuario retira el foco de la aplicación del elemento. Javascript 1.0
Javascript 1.0

onClick
Se produce cuando se da una pulsación o clic al botón del ratón sobre un elemento de la página, generalmente un botón o un enlace.
Javascript 1.0

onDragdrop
Se produce cuando un usuario suelta algo que había arrastrado sobre la página web.
Javascript 1.2

onError
Se produce cuando no se puede cargar un documento o una imagen y esta queda rota.
Javascript 1.1

onFocus
El evento onfocus es lo contrario de onblur. Se produce cuando un elemento de la página o la ventana ganan el foco de la aplicación.
Javascript 1.0

onKeydown
Este evento se produce en el instante que un usuario presiona una tecla, independientemente que la suelte o no. Se produce en el momento de la pulsación.
Javascript 1.2

onKeypress
Ocurre un evento onkeypress cuando el usuario deja pulsada una tecla un tiempo determinado. Antes de este evento se produce un onkeydown en el momento que se pulsa la tecla..
Javascript 1.2

onKeyup
Se produce cuando el usuario deja de apretar una tecla. Se produce en el momento que se libera la tecla.
Javascript 1.2

onLoad
Este evento se desata cuando la página, o en Javascript 1.1 las imágenes, ha terminado de cargarse.
Javascript 1.0

onMousedown
Se produce el evento onmousedown cuando el uuario pulsa sobre un elemento de la página. onmousedown se produce en el momento de pulsar el botón, se suelte o no.
Javascript 1.2

onMousemove
Se produce cuando el ratón se mueve por la página.
Javascript 1.2

onMouseout
Se desata un evento onmuoseout cuando el puntero del ratón sale del área ocupada por un elemento de la página.
Javascript 1.1

onMouseover
Este evento se desata cuando el puntero del ratón entra en el área ocupada por un eolemento de la página.
Javascript 1.0

onMouseup
Este evento se produce en el momento que el usuario suelta el botón del ratón, que previamente había pulsado.
Javascript 1.2

onMove
Evento que se ejecuta cuando se mueve la ventana del navegador, o un frame.
Javascript 1.2

onResize
Evento que se produce cuando se redimensiona la ventana del navegador, o el frame, en caso de que la página los tenga.
Javascript 1.2

onReset
Este evento está asociado a los formularios y se desata en el momento que un usuario hace clic en el botón de reset de un formulario.
Javascript 1.1

onSelect
Se ejecuta cuando un usuario realiza una selección de un elemento de un formulario.
Javascript 1.0

onSubmit
Ocurre cuando el visitante apreta sobre el botón de enviar el formulario. Se ejecuta antes del envío propiamente dicho.
Javascript 1.0

onUnload
Al abandonar una página, ya sea porque se pulse sobre un enlace que nos lleve a otra página o porque se cierre la ventana del navegador, se ejecuta el evento onunload.
Javascript 1.0

Fuente: Desarrollo web
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