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
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
