JavaScript Eventos

Los eventos HTML son cosas que ocurren en los elementos HTML.

Cuando se usa JavaScript en una página HTML, JavaScript puede desencadenar estos eventos.

Eventos HTML

Los eventos HTML pueden ser acciones del navegador o acciones del usuario.

A continuación se muestran ejemplos de eventos HTML:

  • La página HTML termina de cargarse
  • Cuando cambia el campo input HTML
  • Se hace clic en un botón HTML

Normalmente, cuando ocurre un evento, puedes hacer algo.

JavaScript puede ejecutar código cuando se dispara el evento.

En los elementos HTML se pueden agregar atributos de evento, y usar código JavaScript para agregar elementos HTML.

Comillas simples:

<some-HTML-element some-event='JavaScript 代码'>

Comillas dobles:

<some-HTML-element some-event="JavaScript 代码">

En el siguiente ejemplo, se agregó el atributo onclick al elemento botón (junto con el código):

Ejemplos

<button onclick="getElementById('demo').innerHTML=Date()">¿Qué hora es?</button>

Pruébalo »

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

En el siguiente ejemplo, el código modificará el contenido de su propio elemento (usandothis.innerHTML):

Ejemplos

<button onclick="this.innerHTML=Date()">¿Qué hora es?</button>

Pruébalo »

Note El código JavaScript normalmente consta de varias líneas. Es común llamarlo a través de atributos de evento:

Ejemplos

<button onclick="displayDate()">¿Qué hora es?</button>

Pruébalo »

Eventos HTML comunes

A continuación se muestra una lista de algunos eventos HTML comunes:

Evento Descripción
onchange El elemento HTML cambia
onclick El usuario hace clic en un elemento HTML
onmouseover Ocurre cuando el puntero del ratón se mueve sobre el elemento especificado
onmouseout Ocurre cuando el usuario mueve el ratón fuera de un elemento HTML
onkeydown El usuario presiona una tecla del teclado
onload El navegador ha terminado de cargar la página

Lista de más eventos:Manual de referencia de JavaScript - Eventos HTML DOM。

¿Qué puede hacer JavaScript?

Los eventos se pueden usar para manejar la validación de formularios, la entrada del usuario, el comportamiento del usuario y las acciones del navegador:

  • Activar evento al cargar la página
  • Activar evento al cerrar la página
  • El usuario hace clic en un botón para ejecutar una acción
  • Validar la legitimidad del contenido ingresado por el usuario
  • etcétera ...

Se pueden usar varios métodos para ejecutar el código de eventos de JavaScript:

  • Los atributos de eventos HTML pueden ejecutar código JavaScript directamente
  • Los atributos de eventos HTML pueden llamar a funciones de JavaScript
  • Puedes asignar tus propios manejadores de eventos a elementos HTML
  • Puedes evitar que ocurra el evento.
  • etcétera ...
Note En el capítulo de HTML DOM aprenderás más sobre eventos y manejadores de eventos.
Otras extensiones