Eventos globales

Los eventos son mecanismos que permiten crear una interacción entre los elementos del documento y ciertos sucesos relacionados al sistema y a las acciones del usuario. Estos eventos pueden ser asociados a fragmentos de código escritos en un lenguaje del lado cliente (como JavaScript) que llevarán a cabo su proceso cuando se cumplan las condiciones propias del evento al cual han sido asociados. Por ejemplo, un programa puede estar listo para realizar una animación en la página cuando el usuario haga click sobre un elemento determinado.

En HTML5 existe un número de eventos definidos para todos los elementos en el estándar, denominados eventos globales. Sin embargo, muchos de estos eventos tendrán efecto únicamente en un puñado de elementos. Por ejemplo, existen muchos eventos que sólo serán ejectuados para los elementos video y audio, como oncanplay, onpause y onloadeddata.

Lista de eventos globales

onabort

El proceso de carga de este elemento ha sido abortado por el usuario.

onautocomplete

Este control de formulario (form) ha sido rellenado automáticamente por el navegador.

La operación de auto-rellenado es llevada a cabo por los navegadores para incrementar la accesibilidad y la facilidad de uso, y consiste en el rellenado de los controles con con valores conocidos, tomados de la información del usuario o entradas previas.

onautocompleteerror

La operación de auto-rellenado en este control de formulario (form) ha fallado. Esta falla puede deberse a que el usuario ha cancelado la operación, a que el control estaba deshabilitado (mediante el atributo disabled) o a que la información no concordaba con los requerimientos del control.

onblur

Este elemento ha perdido el enfoque.

Ejemplo

<p>Cuando deselecciones este control, el color de su contenedor cambiará: <input type="text" onblur="changeColor(this.parentNode)"></p>

Cuando deselecciones este control, el color de su contenedor cambiará:

oncancel

El usuario ha optado por cancelar la acción presentada por esta ventana de diálogo (dialog). Esto puede haber sido causado por el usuario, si éste ha presionando el botón CANCEL o la tecla ESCAPE, por ejemplo.

oncanplay

Este elemento de video o audio puede continuar con su reproducción, pero probablemente, ésta deberá ser pausada para precargar datos antes de llegar a su final.

La ejecución de este evento está basada en meras estimaciones. No existe certeza de que la reproducción deberá necesariamente ser pausada para pregargar.

oncanplaythrough

Este video o audio puede continuar con su reproducción, y es probable que ésta llegue a su final sin la necesidad de ser pausada para precargar datos.

La ejecución de este evento está basada en meras estimaciones. No existe certeza de que la reproducción será completada sin la necesidad de pausarla para pregargar.

onchange

El valor de este control de formulario (form) ha cambiado desde la última vez que ha recibido el enfoque, y el enfoque ha sido pasado de este a otro elemento.

Ejemplo

<p>Cuando edites y deselecciones este control, el color de fondo de su contenedor cambiará: <input type="text" onchange="changeColor(this.parentNode)"></p>

Cuando edites y deselecciones este control, el color de fondo de su contenedor cambiará:

onclick

El usuario ha presionado y luego soltado un botón del mouse, mientras su cursor estaba sobre este elemento.

Este evento es también ejecutado en un elemento antes de su activación, cuando es accionado desde otro dispositivo como, por ejemplo, un teclado.

Ejemplo

<p onclick="changeColor(this)">Al hacer click sobre este párrafo su color de fondo cambiará.</p>

Al hacer click sobre este párrafo su color de fondo cambiará.

onclose

El usuario ha cerrado este diálogo (dialog).

oncontextmenu

El usuario ha llamado al menú contextual para este elemento, muy probablemente, haciendo click sobre éste con el botón derecho del mouse.

oncuechange

La pista actual de este track ha cambiado. Esto ocurre cuando, por ejemplo, la próxima línea en los subtítulos de un video es mostrada.

ondblclick

El usuario ha presionado y soltado un botón del mouse dos veces (consecutivas y en un corto poríodo de tiempo), mientras su cursor estaba sobre este elemento.

Ejemplo

<p ondblclick="changeColor(this)">Al hacer doble-click sobre este párrafo cambiará su color de fondo.</p>

Al hacer doble-click sobre este párrafo cambiará su color de fondo.

ondrag

Este elemento está siendo actualmente arrastrado por el usuario.

Este evento será ejecutado repetidamente durante una operación de arrastre. Los autores deberían estar al tanto de esta conducta y escribir sus programas en consecuencia, teniendo especial consideración por el tiempo de ejecución.

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true" ondrag="changeColor(this)">Arrastra este párrafo y su color estará en constante cambio.</p>

Arrastra este párrafo y su color estará en constante cambio.

ondragend

La operación de arrastre de este elemento ha concluido.

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true" ondragend="changeColor(this)">Arrastra este párrafo, y cuando termines su color de fondo cambiará.</p>

Arrastra este párrafo, y cuando termines su color de fondo cambiará.

ondragenter

Un elemento está siendo arrastrado y ha ingresado al área ocupada por el elemento que contiene este evento.

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true">Arrastra este párrafo por sobre el siguiente y su color de fondo cambiará cuando ingreses a su espacio.</p>
<p ondragenter="changeColor(this)">Este párrafo cambiará su color de fondo si arrastras un elemento sobre él.</p>

Arrastra este párrafo por sobre el siguiente y su color de fondo cambiará cuando ingreses a su espacio.

Este párrafo cambiará su color de fondo si arrastras un elemento sobre él.

ondragexit

Un elemento está siendo arrastrado y ha sido movido fuera del área ocupada por el elemento que contiene este evento.

Este evento tiene la misma funcionalidad que ondragleave y es propenso a volverse obsoleto en versiones futuras del estándar. Usa el evento ondragleave en su lugar.

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

ondragleave

Un elemento está siendo arrastrado y ha sido movido fuera del área ocupada por el elemento que contiene este evento.

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true">Arrastra este parrafo sobre el pŕoximo y su color de fondo cambiará cuando lo abandones.</p>
<p ondragleave="changeColor(this)">Este párrafo cambiará su color de fondo si arrastras un elemento fuera de él.</p>

Arrastra este parrafo sobre el pŕoximo y su color de fondo cambiará cuando lo abandones.

Este párrafo cambiará su color de fondo si arrastras un elemento fuera de él.

ondragover

Un elemento está siendo arrastrado sobre el elemento que contiene este evento.

Este evento será ejecutado repetidamente durante una operación de arrastre. Los autores deberían estar al tanto de esta conducta y escribir sus programas en consecuencia, teniendo especial consideración por el tiempo de ejecución.

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true">Arrastra este parrafo sobre el pŕoximo y su color de fondo cambiará cuando lo muevas sobre él.</p>
<p ondragover="changeColor(this)">Este párrafo cambiará su color de fondo si arrastras un elemento a través de él.</p>

Arrastra este parrafo sobre el pŕoximo y su color de fondo cambiará cuando lo muevas sobre él.

Este párrafo cambiará su color de fondo si arrastras un elemento a través de él.

ondragstart

Este elemento está comenzando a ser arrastrado (recién se lo ha agarrado).

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true" ondragstart="changeColor(this)">Arrastra este párrafo y su color de fondo cambiará en el momento que comiences.</p>

Arrastra este párrafo y su color de fondo cambiará en el momento que comiences.

ondrop

Un elemento ha sido soltado en el área ocupada por el elemento que contiene este evento.

El manejo predeterminado por parte de los navegadores para operaciones de "arrastrar y soltar" no permite que los elementos de HTML sean soltados unos dentro de otros. Los autores que intenten lograr esta conducta deben prevenir la ejecución de las acciones predeterminadas para este evento y para "ondragover".

El soporte nativo provisto por los navegadores para operaciones de "arrastrar y soltar" es incompleto. Los autores pueden necesitar recurrir a scripts hasta que el soporte aumente.

ondurationchange

El atributo duration de este video o audio ha sido actualizado.

onemptied

Este video o audio ha sido retornado a su estado no inicializado, ya sea porque ha ocurrido un error fatal durante la carga que está a punto de ser reportado, o porque el método load() ha sido invocado mientras el algoritmo de selección de recursos ya estaba siendo ejecutado.

onended

El final de este video o audio ha sido alcanzado.

onerror

El navegador ha encontrado errores que le impidieron cargar apropiadamente este recurso de medios.

onfocus

El elemento ha ganado el enfoque.

Ejemplo

<p>Cuando selecciones este control, el color de fondo de su contenedor cambiará: <input type="text" onfocus="changeColor(this.parentNode)"></p>

Cuando selecciones este control, el color de fondo de su contenedor cambiará:

oninput

El valor de este control de formulario (form) ha sido cambiado.

Este evento es ejecutado inmediatamente después de que el cambio ha ocurrido, en contraste con el evento "onchange", que espera hasta que elemento pierde el enfoque para revisar si se han aplicado cambios a su valor.

Ejemplo

<p>Cuando cambies el texto en este control, el color de fondo de su contenedor cambiará: <input type="text" oninput="changeColor(this.parentNode)"></p>

Cuando cambies el texto en este control, el color de fondo de su contenedor cambiará:

oninvalid

El usuario ha rellenado este control de formulario (form) con datos que no concuerdan con sus criterios de validez y luego intentó enviar el formulario.

Además de revisar controles como number o e-mail, que tienen sus propias restricciones acerca de la información ingresada, los autores pueden especificar los criterios para decidir si un valor es válido o no mediante el atributo pattern.

onkeydown

Una tecla ha sido presionada mientras este elemento tenía el enfoque.

Ejemplo

<p>Cuando presiones una tecla mientras editas este control, el color de fondo de su contenedor cambiará: <input type="text" onkeydown="changeColor(this.parentNode)"></p>

Cuando presiones una tecla mientras editas este control, el color de fondo de su contenedor cambiará:

onkeypress

Una tecla asociada con un carácter ha sido presionada mientras este elemento tenía el enfoque.

En contraste con onkeydown y onkeyup, este evento no será ejecutado por teclas que no están asociadas a caracteres de entrada (la mayoría imprimibles) como, por ejemplo, ALT, CTRL, INS y DEL.

Ejemplo

<p>Cuando presiones una tecla de 'carácter' mientras editas este control, el color de fondo de su contenedor cambiará: <input type="text" onkeypress="changeColor(this.parentNode)"></p>

Cuando presiones una tecla de 'carácter' mientras editas este control, el color de fondo de su contenedor cambiará:

onkeyup

Una tecla ha sido soltada mientras este elemento tenía el enfoque.

Ejemplo

<p>Cuando sueltes una tecla mientras editas este control, el colo de fondo de su contenedor cambiará: <input type="text" onkeyup="changeColor(this.parentNode)"></p>

Cuando sueltes una tecla mientras editas este control, el colo de fondo de su contenedor cambiará:

onload

El navegador ha completado la carga del recurso provisto por este elemento.

onloadeddata

La información de video o audio de este elemento ha sido cargada lo suficiente como para permitirle al navegador mortrarla en la posición actual de reproducción por primera vez.

onloadedmetadata

El navegador ha determinado la duración y dimensiones de este video o audio y las pistas están listas.

onloadstart

La búsqueda de información de medios de este video o audio ha comenzado.

onmousedown

El usuario ha presionado un botón del mouse, mientras su cursor estaba sobre este elemento.

Ejemplo

<p onmousedown="changeColor(this)">Al presionar el botón del mouse sobre este párrafo su color de fondo cambiará.</p>

Al presionar el botón del mouse sobre este párrafo su color de fondo cambiará.

onmouseenter

El cursor del mouse ha ingresado a los límites de este elemento.

Este evento será ejecutado solamente cuando el cursor entre al área de este elemento y no cuando entre al área de cualquiera de sus hijos. Para detectar cuando el puntero ingresa el área de este elemento así como la de sus hijos, usa el evento onmouseover.

El soporte provisto por los navegadores para este evento es incompleto. Lo autores pueden necesitar recurrir a scripts para proveer esta funcionalidad hasta que el soporte mejore.

Ejemplo

<p onmouseenter="changeColor(this)">Al mover el puntero dentro de este párrafo su color de fondo cambiará.</p>

Al mover el puntero dentro de este párrafo su color de fondo cambiará.

onmouseleave

El cursor del mouse se ha movido fuera de los límites de este elemento.

Este evento será ejecutado solamente cuando el cursor salga del área de este elemento y no cuando salga del área de cualquiera de sus hijos. Para detectar cuando el puntero abandona el área de este elemento así como la de sus hijos, usa el evento onmouseout.

El soporte provisto por los navegadores para este evento es incompleto. Lo autores pueden necesitar recurrir a scripts para proveer esta funcionalidad hasta que el soporte mejore.

Ejemplo

<p onmouseleave="changeColor(this)">Al mover el puntero fuera de este párrafo su color de fondo cambiará.</p>

Al mover el puntero fuera de este párrafo su color de fondo cambiará.

onmousemove

El cursor del mouse se está moviendo sobre el elemento.

Este evento se ejecutará repetidamente mientras el puntero se mueva sobre este elemento. Los autores deberían tener en cuenta esta conducta y escribir sus funciones en consecuencia, teniendo consideración especial por el tiempo de ejecución.

Ejemplo

<p onmousemove="changeColor(this)">Al mover el mouse sobre este párrafo su color de fondo cambiará constantemente.</p>

Al mover el mouse sobre este párrafo su color de fondo cambiará constantemente.

onmouseout

El cursor del mouse se ha movido fuera de los límites de este elemento (o fuera de los de cualquiera de sus hijos).

Este evento será disparado, no solamente cuando el cursor salga del área de este elemento, sino también cuando salga del área de cualquiera de sus hijos. Para detectar al puntero saliendo del área de este elemento únicamente, usa el evento onmouseleave.

Ejemplo

<p onmouseout="changeColor(this)">Al mover el mouse fuera de este párrafo, su color de fondo cambiará.</p>

Al mover el mouse fuera de este párrafo, su color de fondo cambiará.

onmouseover

El cursor del mouse ha entrado al área de este elemento (o a la de cualquiera de sus hijos).

Este evento será disparado, no solamente cuando el cursor entre al área de este elemento, sino también cuando entre al área de cualquiera de sus hijos. Para detectar al puntero entrando al área de este elemento únicamente, usa el evento onmouseenter.

Ejemplo

<p onmouseover="changeColor(this)">Al mover el mouse al área de este elemento su color de fondo cambiará.</p>

Al mover el mouse al área de este elemento su color de fondo cambiará.

onmouseup

El usuario ha soltado el botón del mouse mientras su cursor estaba sobre este elemento.

Ejemplo

<p onmouseup="changeColor(this)">Al soltar el botón del mouse sobre este párrafo su color de fondo cambiará.</p>

Al soltar el botón del mouse sobre este párrafo su color de fondo cambiará.

onmousewheel

El usuario ha rotado el mecanismo de rueda del mouse mientras su cursor estaba sobre este elemento.

Ejemplo

<p onwheel="changeColor(this)">Al rotar la rueda del mouse sobre este párrafo su color de fondo cambiará.</p>

Al rotar la rueda del mouse sobre este párrafo su color de fondo cambiará.

onpause

El flujo de reproducción en este video o audio ha sido pausado.

onplay

El navegador ha iniciado la reproducción de este video o audio.

onplaying

La reproducción de este video o audio está lista para comenzar después de haber sido pausada o retrasada debido a la falta de información de medios.

onprogress

El navegador se encuentra recuperando información de medios para este video o audio.

onratechange

Uno de los atributos defaultPlaybackRate y playbackRate de este video o audio ha cambiado.

onreset

Este control de formualrio (form) ha sido reiniciado.

La operación de reinicio es comúnmente llevada a cabo cuando el usuario presiona un botón de reinicio, y hace que todos los controles en el formulario tomen sus valores iniciales.

Ejemplo

<form onreset="changeColor(this)">
  <input type="text" value="Valor inicial">
  <input type="reset" value="Reiniciar este formulario">
</form>

onresize

El tamaño de este elemento ha cambiado.

Este evento puede ser ejecutado repetidamente durante una operación de redimensionamiento. Los autores deben tener en cuenta esta conducta, ya que un script pesado puede tener un impacto negativo en el desempeño de la aplicación.

Este evento ha sido recientemente puesto a disposición de todos los elementos de HTML. Se espera que el soporte provisto por los navegadores sea pobre para todos los elementos excepto body.

Ejemplo

<p onresize="changeColor(this)">Al cambiar el tamaño de este párrafo su color de fondo cambiará.</p>

Al cambiar el tamaño de este párrafo su color de fondo cambiará.

onscroll

Los contenidos de este elemento o documento han sido desplazados.

Este evento puede ser ejecutado repetidamente durante una operación de desplazamiento. Los autores deben tener en cuenta esta conducta, ya que un script pesado puede tener un impacto negativo en el desempeño de la aplicación.

Para que este evento se ejecute, el elemento debe estar mostrando su contenido en una ventana desplazable (comúnmente un iframe con barras de desplazamiento).

Ejemplo

<div onscroll="changeColor(this)" style="height: 6em; overflow: auto;">
  Primera línea<br>Segunda línea<br>tercera línea<br>Cuarta línea<br>
  Quinta línea<br>Sexta línea<br>Séptima línea<br>Octava línea
</div>
Primera línea
Segunda línea
tercera línea
Cuarta línea
Quinta línea
Sexta línea
Séptima línea
Octava línea

onseeked

El valor del atributo seeking ha cambiado a falso, al finalizarse una operación de búsqueda en este video o audio.

onseeking

El valor del atributo seeking ha cambiado a verdadero, y la operación de búsqueda en este video o audio está tardando lo suficiente como para que el navegador tenga tiempo de ejecutar el evento.

onselect

El usuario ha seleccionado una porción de texto en este control de formulario (form).

Ejemplo

<p>Cuando selecciones una porción de texto en este control, el color de fondo de su contenedor cambiará: <input type="text" value="Texto en este control" onselect="changeColor(this.parentNode)"></p>

Cuando selecciones una porción de texto en este control, el color de fondo de su contenedor cambiará:

onshow

El usuario ha requerido que este menu "popup" sea mostrado.

onsort

El ordenamiento de esta tabla (table) ha sido solicitado, pero la acción no ha sido llevada a cabo aún. La cancelación de este evento prevendría la operación de ordenamiento.

onstalled

A pesar de los esfuerzos del navegador por recuperar información de medios para este video o audio, no se han recibido datos.

onsubmit

El usuario ha enviado el formulario (form).

La operación de envío de un formulario es comúnmente llevada a cabo cuando el usuario presiona el botón de envío. Esto prepara al formulario para ser enviado al agente procesador especificado en el atributo action.

Ejemplo

<form action="../form-result.php" onsubmit="changeColor(this, event)" target="_blank">
  <input type="text" name="campo1" value="Valor inicial">
  <input type="submit" value="Enviar este formulario">
</form>

onsuspend

La recepción de la información de medios para este video o audio ha sido intencionalmente suspendida por el navegador aún cuando todavía no se han descargado todos los contenidos.

ontimeupdate

La posición de reproducción de este video o audio ha cambiado.

Este evento podría ser ejecutado como parte de la reproducción normal, o bien debido a un salto ejecutado por el usuario o por el mismo programa.

ontoggle

El estado de este elemento details ha cambiado (su contenido ha sido ocultado o mostrado).

Este atributo es bastante nuevo y, por lo tanto, se espera que el soporte provisto por los navegadores sea relativamente pobre.

onvolumechange

El valor de cualquiera de los dos atributos volume y muted de este video o audio ha cambiado.

onwaiting

La reproducción de este video o audio has sido pausada debido a que los datos necesarios para continuarla no se encuentran disponibles aún.