Un evento es iniciado por el usuario o por el sistema. Se inicia de forma asincrona con
cualquier otro elemento
Intervienen en los Eventos
Declaración del manejadores de eventos
El manejador se indica en:
- la etiqueta del elemento:
onclick="funcion()"
- Dinámicamente usando DOM
Por ejemplo:
elemento.addEventListner("EVENTO", func, bool_orden);
- elemento: cualquier elemento del DOM
- EVENTO: cualquier suceso de la lista que se puede consultar más adelante en el documento
- bool_orden true o false según veremos más adelante.
Ejemplo:
Cuando se pulsa sobre el botón se ejecuta la función procesar()
Función de gestión del event
La función de gestión se ejecuta cuando se produce el evento y recibe como
parámetro el objeto Event.
function showCoords(event){
alert(
"clientX value: " + event.clientX + "\n" +
"clientY value: " + event.clientY + "\n"
);
}
Se permite pasar tantos parámetros como se desee, pero siempre se debe pasar el evento.
Ejemplo de objeto con varios parámetros
Para ver las coordinadas del ratón
haga clic en cualquier lugar de esta div.
Información sobre el evento
var tipo = event.type;
El tipo sera el nombre del evento (sin el prefijo "on").
function resalta(elEvento) {
var evento = elEvento ;
switch(evento.type) {
case 'mouseover':
this.style.borderColor = 'black';
break;
case 'mouseout':
this.style.borderColor = 'silver';
break;
}
}
Una clasificación de eventos
Eventos de documento
Asociado a la etiqueta <body>
| Tipo de evento |
Atributo HTML |
Descripción |
| UIEvent |
onLoad |
La página (el documento HTML) ha terminado de cargarse. |
| UIEvent |
onUnload |
La página (el documento HTML) va a cerrarse. |
| UIEvent |
onScroll |
El usuario ha hecho scroll sobre la página (el documento HTML). |
Eventos de ratón
--aqui vuestra lista, por ejemplo usando sigue el enlace para eventos ratón y teclado
Mas eventos
continuar en web lenguaje html
o esta tabla en MDN
| Tipo de evento |
Atributo HTML |
Descripción |
| Event |
onSubmit |
El usuario ha enviado el formulario. |
| Event |
onReset |
El usuario ha reiniciado el formulario. |
| Event |
onChange |
El usuario ha cambiado el valor de un campo de formulario. |
| Event |
onSelect |
El usuario ha seleccionado una opción de un campo de formulario. |
| Event |
onFocus |
El usuario ha seleccionado un campo de formulario. |
| Event |
onBlur |
El usuario ha abandonado el campo de formulario. |
El objecto "event"
( Ref MDN )
Propiedades públicas
| Propiedad |
Descripción |
| target |
El elemento que ha provocado el evento. |
| currentTarget |
El elemento que ha recibido el evento. |
| type |
El tipo de evento. |
| timeStamp |
El tiempo en milisegundos desde el inicio del evento. |
| bubbles |
El valor de la propiedad bubbles del evento. |
| cancelable |
El valor de la propiedad cancelable del evento. |
| defaultPrevented |
El valor de la propiedad defaultPrevented del evento. |
| isTrusted |
El valor de la propiedad isTrusted del evento. |
Propiedades públicas
| Método |
Descripción |
| stopPropagation() |
Detiene la propagación del evento. |
| stopImmediatePropagation() |
Detiene la propagación del event
y la ejecución de los manejadores del evento. |
| preventDefault() |
Previene la ejecución del evento. |
| initEvent() |
Inicializa el evento. |
| initCustomEvent() |
Inicializa el evento. |
| dispatchEvent() |
Dispara el evento. |
Ejemplo.