Eventos en JavaScript
En JavaScript, la interacción con el usuario se consigue mediante la captura de los eventos que éste produce. Un evento es una acción del usuario ante la cual puede realizarse algún proceso (por ejemplo, el cambio del valor de un formulario, o la pulsación de un enlace).
Los eventos se capturan mediante los manejadores de eventos. El proceso a realizar se programa mediante funciones JavaScript llamadas por los manejadores de eventos.
La siguiente tabla muestra los manejadores de eventos que pueden utilizarse en JavaScript, la versión a partir de la cual están soportados y su significado.
Manejador Versión Se produce cuando...
onAbort 1.1 El usuario interrumpe la carga de una imagen
onBlur 1.0 Un elemento de formulario, una ventana o un marco pierden el foco
onChange 1.0 (1.1 para FileUpload) El valor de un campo de formulario cambia
onClick 1.0 Se hace click en un objeto o formulario
onDblClick 1.2 (no en Mac) Se hace click doble en un objeto o formulario
onDragDrop 1.2 El usuario arrastra y suelta un objeto en la ventana
onError 1.1 La carga de un documento o imagen produce un error
onFocus 1.1 (1.2 para Layer) Una ventana, marco o elemento de formulario recibe el foco
onKeyDown 1.2 El usuario pulsa una tecla
onKeyPress 1.2 El usuario mantiene pulsada una tecla
onKeyUp 1.2 El usuario libera una tecla
onLoad 1.0 (1.1 para image) El navegador termina la carga de una ventana
onMouseDown 1.2 El usuario pulsa un botón del ratón
onMouseMove 1.2 El usuario mueve el puntero
onMouseOut 1.1 El puntero abando una área o enlace
onMouseOver 1.0 (1.1 para area) El puntero entra en una área o imagen
onMouseUp 1.2 El usuario libera un botón del ratón
onMove 1.2 Se mueve una ventana o un marco
onReset 1.1 El usuario limpia un formulario
onResize 1.2 Se cambia el tamaño de una ventana o marco
onSelect 1.0 Se selecciona el texto del campo texto o área de texto de un formulario
onSubmit 1.0 El usuario envía un formulario
onUnload 1.0 El usuario abandona una página
En este ejemplo, Comprueba() es una función JavaScript definida en alguna parte del documento HTML (habitualmente en la cabecera del mismo). El identificador this es una palabra propia del lenguaje, y se refiere al objeto desde el cual se efectua la llamada a la función (en este caso, el campo del formulario).
La siguiente tabla muestra los eventos que pueden utilizarse con los objetos del modelo de objetos JavaScript del Navigator.
Manejador de evento Objetos para los que está definido
onAbort Image
onBlur Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window
onChange FileUpload, Select, Text, Textarea
onClick Button, document, Checkbox, Link, Radio, Reset, Submit
onDblClick document, Link
onDragDrop window
onError Image, window
onFocus Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, window
onKeyDown document, Image, Link, Textarea
onKeyPress document, Image, Link, Textarea
onKeyUp document, Image, Link, Textarea
onLoad Image, Layer, window
onMouseDown Button, document, Link
onMouseMove Ninguno (debe asociarse a uno)
onMouseOut Layer, Link
onMouseOver Layer, Link
onMouseUp Button, document, Link
onMove window
onReset Form
onResize window
onSelect Text, Textarea
onSubmit Form
onUnload window
Métodos de evento disponibles en JavaScript
Los siguientes métodos de evento pueden utilizarse en JavaScript:
Métodos de evento Función que realizan
blur() Elimina el foco del objeto desde el que se llame
click() Simula la realización de un click sobre el objeto desde el que se llame
focus() Lleva el foco al objeto desde el que se llame
select() Selecciona el área de texto del campo desde el que se llame
submit() Realiza el envío del formulario desde el que se llame
Eventos onLoad y onUnload
Se usan como atributos del tag de HTML.
La función Hola() se ejecutará antes de que se cargue la página y la función Adios() al abandonarla.
Modelo de Objeto Dinamico (DOM):
Antes de continuar para aprender acerca de objeto de formularios y como captar eventos, debemos conocer donde pertenecen ellos. Cualquier acción o evento que causa un cambio dinámico en una página web usando javascript debe ser agrupado bajo DOM (Modelo Objeto dinamico). Cualquier elemento HTML, pude ser accedido o cambiado dinámicamente usando javascript DOM.
El W3C Documento de Objeto Modelo (DOM) es una plataforma e interface de lenguaje neutral que brinda a los programas y scripts acceso dinámico y actualizaciones de contenido, estructura y estilo de un documento. El Documento Object Modelo (DOM) es una aplicación de programa de interface (API) para HTML válido.
Todos los elementos HTML y sus atributos pueden ser accedidos mediante el árbol DOM. Sus contenidos pueden ser modificados o eliminados, nuevos elementos pueden ser creados usando DOM.
Por ejemplo, el form nombrado "ssss" en un documento HTML puede ser accedido como document.ssss;
Captar eventos:
Eventos son acciones que suceden en una página web y son mayormente disparadas por el usuario. Existen programas incorporados para captar estos eventos. Por ejemplo: podemos considerer un botón o un hipervínculo. Digamos que un usuario mueve el mouse sobre él, entonces el evento será disparado Nosotros podemos capturar los eventos e invocar una funcion de javascript para realizar una acción.
El capturador de evento es generalmente agregado como un atributo a una etiqueta html . Un evento sobre el mouse es capturado usando onMouseOver. En el siguiente ejemplo vamos a realizar un alerta cuando el mouse is movido sobre el botón.
Resulta:
Step 1: Creamos un botón
Step 2: Invocamos mouse over handler usando el atributo onMouseOver y pasamos la función testdom como su valor. Entonces testdom() method sera llamado cuando ocurre un mouse over evento.
Step 3: Hemos escrito una función javascript testdom() and y llamado a un alerta dentro de esta función.
aprenderemos sobre los capturadotes de eventos asociados con cada tipo de formularios y metodos DOM que pueden ser usados con elementos de formulario.
“Javascript (JS) es uno de los lenguajes más utilizados en todo el mundo. Algunas veces se lo denomina también Java Script. Espero que Usted disfrute este tutorial. Envíeme sus sugestiones o consultas sobre este tutorial de javascript o java script. El contenido de este tutorial posee derechos registrados.”
Carga y descarga del documento.
Los eventos en JavaScript:
Básicamente, la idea de cómo trabajar con eventos es esta: hay unas cuantas etiquetas HTML susceptibles de generar eventos. Por ejemplo, si tenemos un enlace, podemos pasar sobre él, o podemos hacer click con el ratón sobre él. Lo que se hizo fue dar nombres a estos posibles eventos, asociarlos a las etiquetas que los pueden generar, y permitir que las funciones JavaScript puedan ser llamadas al generarse dichos eventos.
Si vemos el ejemplo del enlace: podemos hacer, de alguna manera, que al pasar sobre él, se ejecute una cierta función que tengamos definida. Todo se basa en que las etiquetas HTML pueden tener como parámetro, además de los que ya tienen, los eventos que son capaces de generar, y en ese parámetro especificar la función JavaScript a ejecutar.
Siguiendo con este ejemplo: el evento de "pasar por encima de" es onMouseOver. Supongamos que tenemos definida una función que se llame Hacer_Algo(), la manera de que se ejecute al pasar sobre el enlace es:
a href="mi_enlace.html" onMouseOver="Hacer_Algo();" Sucederá algo si se pasa por aquí encima /A
Nota: el codigo va dentro de signos de menor y mayor.
Visto este ejemplo, lo más importante es saber de qué eventos disponemos, y qué etiquetas los pueden
generar. Aqui listo los eventos mas utilizados:
onLoad El documento se carga
onUnload El documento se descarga
onMouseOver El ratón pasa sobre una zona
onMouseOut El ratón sale de una zona
onSubmit Se envía un formulario
onClick Se pulsa el ratón sobre algo
checkbox, radio es para hacer referencia a los checkbox y radios de los formularios
onBlur Se pierde el cursor
onChange Cambia el contenido ose pierde el cursor
onFocus Se recibe el cursor
onSelect Se selecciona un texto
Aqui solo listo los eventos mas utilizados, pero al final de este capitulo un enlace en donde puedes encontrar todos los eventos disponibles en JavaScript, ya teniendo los conocimientos basicos de como trabajar con los eventos principales se te hara mas facil trabajar con otros eventos a la hora que tengas que utilizarlo.
Etiqueta onEvento="CodigoJS;" (dentro de signos de menor y mayor) donde CodigoJS puede ser una llamada a una función nuestra, o una secuencia de sentencias. Cuando creamos un manejador para el evento, estamos asignando al correspondiente objeto una propiedad que toma el nombre de dicho manejador, y es esta propiedad la que nos permite acceder al manejador del evento del objeto.
Esto mismo es lo que nos va a permitir cambiar el código asociado al evento de un objeto. Vamos a explicar esto con un ejemplo. Supongamos que queremos crear una página en la que, al pulsar una vez sobre un botón pase una cosa, y que cuando pulsemos otra vez (y las siguientes), pase algo completamente distinto a lo que sucedió la primera vez. Por ejemplo, tenemos un botón que al pulsarlo la primera vez nos mostraría una ventana preguntándonos el nombre, y que las siguientes veces que lo pulsáramos nos dijera "yo te conozco de algun lugar, ¿verdad? Tú eres Fulanito".
Hacer esto implica que de alguna manera debemos ser capaces de cambiar el código asociado al evento en el que queremos que se active la acción. ¿Cómo lo cambiamos? No debemos olvidar que el nombre de una función es una referencia a la zona de memoria en la que se encuentra, y si cambiamos al manejador del evento la referencia a una cierta función, estamos cambiando la función que se ejecutará cuando el evento suceda
Algunos eventos introducidos a partir de la version 1.2 de JavaScript y pocos conocidos:
onAbort: Este ejemplo suele utilizarse solo con las imagenes, y se produce cuando el usuario interrumpe la carga de una imagen.
onDblClick: Se suele emplear en los enlaces y botones y se produce cuando el usuario en vez de hacer un click hace doble click.
onDragDrop: Se suele emplear sobre el objeto window, y se produce cuando el usuario suelta un objeto sobre la ventana del navegador.
onError: Se suele emplear en imagenes y sobre el objeto window, y se produce cuando la carga de alguno de estos resulta erronea. (No se produce cuando hay errores del navegador ejemplo un link que no existe)
onKeyDown: Se suele emplear sobre todo los recurso exsitente dentro de un objeto window, y se produce justo en el momento en que el usuario pulsa una tecla.
onKeyPress: Se suele aplicar tambien a todos los componentes dentro de un objeto window, y se produce cuando se mantiene la tecla pulsada.
onKeyUp: Es el ultimo de la familia que corresponde a la interacion con el teclado al igual se aplica a los mismo elemntos que los anteriores, y se produce cuando se suelta la tecla pulsada.
onMouseDown: Documentos, Botones y enlaces, y se produce cuando el usuario pulsa cualquiero boton del raton .
onMouseMove: te puedes imaginar a que objeto va dirigido este?, podrian ser dos posibles respuesta ningun objeto o todos los objetos, lo digo es porque es lo que veo en muchos manuales de JavaScript en la red para mi la mas cierta es ningun objeto ya que si fuera sobre todo los objetos pudieras aplicarsela a uno en si :--).
onMouseUp: Se suele utilizar en Documentos, Botones y Enlaces y secede cuando el usuario suelta el el boton del raton que habia pulsado.
onMove: Sobre el objeto window y sucede cuando el usuario mueve el objeto ventana, aunque tambien vale si la ventana es movida por la accion de un script.
onReset: Formularios osea sobre el Objeto form, y se produce cuando el usuario resetea un formulario a traves del boton reset.
onResize: Sobre el objetop window, y se produce cuando el usuario cambia de tamaño la ventana, cabe decir que tambien vale si la accion es ejecutada por un script.
No hay comentarios:
Publicar un comentario