Usuario:Juanda/javascript/Eventos

Introducción
onload			Esperando a que la página se cargue por completo onUnload		Cuando el usuario abandona la página onMouseOver            Cuando el ratón está sobre el elemento onMouseOut		Cuando el ratón se mueve fuera del elemento onClick                Al hacer clic con el ratón onFocus			Un elemento coge el foco onBlur			Un elemento pierde el foco onChange		Un elemento cambia onSubmit		Para validar los campos de un formulario antes de enviarlos ...
 * Todos los elementos de una página tienen asociados eventos que pueden disparar funciones de JavaScript.
 * Hay eventos asociados a la ventana (etiqueta &lt;body&gt;), a los formularios... que se disparan por el ratón, el teclado, la carga de una página o la multimedia.
 * Un mismo tipo de evento puede estar asociado a elementos html diferentes.
 * Aumento considerable de los eventos con html5: Lista de eventos
 * Eventos habituales en el body:
 * Eventos habituales sobre distintas etiquetas, para animaciones:
 * Eventos de formularios

Manejadores de eventos
JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos":

Captura de errores

 * El evento onerror se dispara cuando hay un error de script en la página
 * Se debe crear una función que maneje el error.
 * La función se llama desde el manejador de eventos de onerror con 3 argumentos:
 * msg (mensaje de error)
 * url (la url de la página que ha causado el error)
 * line (la línea en la que ha ocurrido el error).


 * Ejemplo captura de error con onerror:

try....catch y throw
Se pueden lanzar errores mediante throw:

Uso de la variable this
Modificamos los bordes del elemento al pasar el ratón por encima:

Uso de this para referirse al elemento o etiqueta html que ha provocado el evento:


 * Ejemplo de uso de la variable this


 * Javascript mediante función externa
 * Muchas ventajas, pero un inconveniente: No se puede utilizar this
 * Solución: Al llamar a una función, debemos pasar this como parámetro.


 * Varios case responden igual debido a las diferentes respuestas de los navegadores.

Separación de html y javascript
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo: Se puede transformar en...


 * Podemos dar "un paso más" y lograr una separación mayor:


 * Usaremos la técnica de los manejadores semánticos...

Técnica de los manejadores semánticos
1. Asignar un identificador único al elemento XHTML mediante el atributo id. 2. Crear una función de JavaScript encargada de manejar el evento. 3. Asignar la función externa al evento correspondiente en el elemento deseado.

Dentro de las funciones externas asignadas sí que se puede utilizar la variable this para referirse al elemento que provoca el evento.

Inconveniente: la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos html. ¡Para ello debemos utilizar el evento onload!

Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo: Se puede transformar en...
 * Separación de html y javascript

Obteniendo información de eventos:

 * Mediante el objeto event.
 * Windows considera que el objeto proviene del objeto window.
 * el resto de navegadores lo muestran como "un parámetro mágico" de la función

Eventos de teclado

 * Cuando un usuario pulsa una tecla normal, se producen tres eventos seguidos y en este orden: onkeydown, onkeypress y onkeyup.
 * El evento onkeydown se corresponde con el hecho de pulsar una tecla y no soltarla.
 * El evento onkeypress es la propia pulsación de la tecla
 * El evento onkeyup hace referencia al hecho de soltar una tecla que estaba pulsada.


 * La forma más sencilla de obtener la información sobre la tecla que se ha pulsado es mediante el evento onkeypress. Sin embargo no todos los navegadores funcionan igual, existen teclas especiales...

Ejemplo eventos teclado

 * Solución independiente del navegador: