You are here
Manejadores de eventos de JAVASCRIPT Sin categoría 

Manejadores de eventos de JAVASCRIPT

Manejadores de eventos de JAVASCRIPT

 

Los eventos son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir un comportamiento de la página cuando se produzcan.

 

Cuando un usuario visita una página web e interactúa con ella se producen los eventos y con Javascript podemos definir qué queremos que ocurra cuando se produzcan.

 

Con javascript podemos definir qué es lo que pasa cuando se produce un evento como podría ser que un usuario pulse sobre un botón, edite un campo de texto o abandone la página.

 

El manejo de eventos es el caballo de batalla para hacer páginas interactivas, porque con ellos podemos responder a las acciones de los usuarios. Hasta ahora en este manual hemos podido ver muchos ejemplos de manejo de uno de los eventos de Javascript, el evento onclick, que se produce al pulsar un elemento de la página. Hasta ahora siempre hemos aplicado el evento a un botón, pero podríamos aplicarlo a otros elementos de la página.

 

CÓMO SE DEFINE UN EVENTO

 

Para definir las acciones que queremos realizar al producirse un evento utilizamos los manejadores de eventos. Existen muchos tipos de manejadores de

 

 

eventos, para muchos tipos de acciones del usuario. El maneador de eventos se coloca en la etiqueta HTML del elemento de la página que queremos que responda a las acciones del usuario.

 

Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al hacer click sobre un botón pase alguna cosa, escribimos el manejador onclick en la etiqueta <INPUT type=button> de ese botón. Algo parecido a esto.

 

<INPUT type=button value=”pulsame” onclick=”sentencias_javascript…”>

 

Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento, en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos que se ejecuten al producirse el evento.

 

Cada elemento de la página tiene su propia lista de eventos soportados, vamos a ver otro ejemplo de manejo de eventos, esta vez sobre un menú desplegable, en el que definimos un comportamiento cuando cambiamos el valor seleccionado.

 

<SELECT onchange=”window.alert(‘Cambiaste la selección’)”>

<OPTION value=”opcion1″>Opcion 1

<OPTION value=”opcion2″>Opcion 2

</SELECT>

 

Dentro de los manejadores de eventos podemos colocar tantas instrucciones como deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola instrucción, y si se desean colocar más de una se suele crear una función con todas las instrucciones y dentro del manejador se coloca una sola instrucción que es la llamada a la función.

 

Vamos a ver cómo se colocarían en un manejador varias instrucciones.

 

<input type=button value=Pulsame

onclick=”x=30; window.alert(x); window.document.bgColor = ‘red'”>

 

Son instrucciones muy simples como asignar a x el valor 30, hacer una ventana de alerta con el valor de x y cambiar el color del fondo a rojo.

 

Sin embargo, tantas instrucciones puestas en un manejador quedan un poco confusas, habría sido mejor crear una función así.

 

 

<script>

function ejecutaEventoOnclick(){

x = 30 window.alert(x) window.document.bgColor = ‘red’

}

</script>

<FORM>

<input type=button value=Pulsame onclick=”ejecutaEventoOnclick()”>

</FORM>

 

 

JERARQUÍA DESDE EL OBJETO WINDOW

 

En los manejadores de eventos se tiene que especificar la jerarquía entera de objetos del navegador, empezando siempre por el objeto window. Esto es necesario porque hay algún browser antiguo que no sobreentiende el objeto window cuando se escriben sentencias

 

Javascript vinculadas a manejadores de eventos.

 

LOS MANEJADORES DE EVENTOS EN JAVASCRIPT

 

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 nose produce hasta que el usuario retira el foco de la aplicación del elemento. 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

elemento 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

 

MANEJADORES DE EVENTOS EN JAVASCRIPT 1.3

 

Cada evento tiene un nombre, por ejemplo “click”. Los manejadores eventos,

que son usados para invocar una serie de comandos cuando se produce un evento, tienen siempre la palabra “on” seguida del nombre del evento. Por ejemplo, “onclick”. MANEJADORES DE EVENTOS (EVENT HANDLERS) EN JAVASCRIPT 1.3

 

Abort (onabort): Se lanza cuando se abortó la carga de un elemento de la página, por ejemplo una imagen.

 

Blur (onblur): Se procesa este evento cuando un elemento de la página, generalmente un elemento de formulario, pierde el foco de la aplicación.

 

Change (onchange): Este evento se produce cuando el usuario cambia el contenido de un elemento de formulario, tipo select, input o textarea.

 

Click (onclick): Se lanza cuando el usuario hace clic sobre un elemento de la página, que puede ser un botón, un enlace, etc.

 

DblClick (ondblclick): Este evento es lanzado cuando el usuario hace doble click en un elemento de formulario o un link.

 

DragDrop (ondragdrop): Este evento se produce cuando el usuario arrastra y suelta un objeto en la ventana del navegador.

 

Error (onerror): producido cuando hubo un error en la carga de un elemento de la página o de un documento.

 

Focus (onfocus): Se produce este evento cuando un elemento de la página, generalmente un elemento de formulario, gana el foco de la aplicación.

 

KeyDown (onkeydown): Este evento se lanza cuando el usuario pulsa una tecla.

 

 

 

 

KeyPress (onkeypress): Se lanza el evento onkeypress cuando el usuario pulsa o mantiene pulsada una tecla.

 

KeyUp (onkeyup): Se produce cuando el usuario suelta una tecla que tenía pulsada.

 

Load (onload): Se ejecuta cuando se termina de cargar la página, o bien todos los frames del conjunto de FRAMESET.

 

MouseDown (onmousedown): Este evento se produce cuando el usuario aprieta el botón del ratón.

 

MouseMove (onmousemove): Se ejecuta cuando el usuario mueve el ratón.

 

MouseOut (onmouseout): Se lanza cuando el usuario retira el puntero del ratón. Por ejemplo, si colocamos onmouseout sobre una imagen, el evento se lanzaría en el momento que el usuario sale con el puntero del ratón de esa imagen.

MouseOver (onmouseover): Este evento se desata cuando el usuario mueve el puntero del ratón sobre un elemento. Imaginemos que colocamos este evento en una imagen, entonces se lanza, una sola vez, en el momento de entrar con el puntero en el área que ocupa esa imagen.

 

MouseUp (onmouseup): Este evento se produce cuando el usuario suelta o deja de apretar el botón del ratón.

 

Move (onmove): Se produce cuando el usuario o un script mueven la ventana del navegador.

 

Reset (onreset): El evento se ejecuta cuando se resetea el contenido de un formulario, haciendo clic en un botón de reset del formulario, si es que lo tiene.

 

Resize (onresize): Se lanza cuando el usuario, o un script, alteran el tamaño de una ventana del navegador o de un frame.

 

Select (onselect): El evento se produce cuando el usuario selecciona un texto de un textarea o bien de un campo de texto normal.

 

Submit (onsub)mit: Se lanza cuando se aprieta el botón de submitir de un formulario, así que permite ejecutar código cuando el usuario envía el formulario.

 

UnLoad (onunload): Evento que se produce cuando el usuario sale de un documento, osea, al salir de la página web, ya sea por pulsar un enlace que lleva a otra página o por cerrar la ventana del navegador.


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts