Eventos de JavaScript

Los eventos HTML son acciones que ocurren en un elemento HTML.

Cuando se utiliza JavaScript en una página HTML, JavaScript puede "reactivar" estos eventos.

Eventos HTML

Los eventos HTML pueden ser acciones realizadas por el navegador o el usuario.

A continuación, se presentan algunos ejemplos de eventos HTML:

  • La página web HTML se carga
  • El campo de entrada HTML se modifica
  • El botón HTML se hace clic

Generalmente, cuando ocurre un evento, el usuario desea hacer algo.

JavaScript le permite ejecutar código cuando se detecta un evento.

a través de código JavaScript，HTML le permite agregar programas de eventos a los elementos HTML.

usando comillas simples:

<element event='algunos JavaScript>

usando comillas dobles:

<element event="algunos JavaScript">

En el siguiente ejemplo,onclick propiedad (y código) se agrega a <button> elemento:

Ejemplo

<button onclick='document.getElementById("demo").innerHTML=Date()'>¿Cuál es la hora actual?</button>

Intente hacerlo usted mismo

En el ejemplo anterior, el código JavaScript cambió el contenido del elemento con id="demo".

En el siguiente ejemplo, el código (usando this.innerHTML）ha cambiado el contenido de su propio elemento:

Ejemplo

<button onclick="this.innerHTML=Date()">¿Cuál es la hora actual?</button>

Intente hacerlo usted mismo

El código JavaScript generalmente tiene muchas líneas. Es más común llamar a una función a través de propiedades de eventos:

Ejemplo

<button onclick="displayDate()">¿Cuál es la hora actual?</button>

Intente hacerlo usted mismo

Eventos HTML comunes

A continuación, se presentan algunos eventos HTML comunes:

evento descripción
onchange El elemento HTML ha sido modificado
onclick El usuario hace clic en el elemento HTML.
onmouseover El usuario mueve el ratón sobre el elemento HTML.
onmouseout El usuario mueve el ratón fuera del elemento HTML.
onkeydown El usuario presiona una tecla del teclado.
onload El navegador ha completado la carga de la página.

Lista más completa:Manual de referencia de JavaScript de CodeW3C.com para eventos DOM HTML.

¿Qué puede hacer JavaScript?

Los gestores de eventos se pueden usar para manejar, validar entradas del usuario, acciones del usuario y acciones del navegador:

  • Lo que debe hacerse cada vez que se cargue la página.
  • Lo que debe hacerse cuando se cierre la página.
  • Acción que debe ejecutarse cuando el usuario haga clic en un botón.
  • Contenido que debe validarse cuando el usuario ingrese datos.
  • Y otros

Hay muchas formas de hacer que JavaScript maneje eventos:

  • Las propiedades de eventos HTML pueden ejecutar código JavaScript.
  • Las propiedades de eventos HTML pueden llamar a funciones de JavaScript.
  • Puede asignar su propia función de manejo de eventos a los elementos HTML.
  • Puede evitar que los eventos se envíen o se procesen.
  • Y otros

Aprenderá más sobre eventos y gestores de eventos en el capítulo de DOM HTML.