Eventos de JavaScript


Tabla de contenido

    Mostrar tabla de contenidos


Los eventos HTML son "cosas" que suceden con los elementos HTML.

Cuando se utiliza JavaScript en páginas HTML, JavaScript puede "reaccionar" en estos eventos.


Eventos HTML

Un evento HTML puede ser algo que hace el navegador o algo que hace un usuario.

A continuación se muestran algunos ejemplos de eventos HTML:

  • Una página web HTML ha terminado de cargarse

  • Se cambió un campo de entrada HTML

  • Se hizo clic en un botón HTML

A menudo, cuando suceden eventos, es posible que desees hacer algo.

JavaScript le permite ejecutar código cuando se detectan eventos.

HTML permite agregar atributos de controlador de eventos, con código JavaScript, a los elementos HTML.

Con comillas simples:

<element
 event='some JavaScript'>

Con comillas dobles:

<element
 event="some JavaScript">

En el siguiente ejemplo, se agrega un atributo onclick (con código) a un <button> elemento:

Ejemplo

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

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

En el siguiente ejemplo, el código cambia el contenido de su propio elemento (usando this.innerHTML):

Ejemplo

<button onclick="this.innerHTML = Date()">The time is?</button>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

El código JavaScript suele tener varias líneas. Es más común ver atributos de eventos llamando a funciones:

Ejemplo

<button onclick="displayDate()">The time is?</button>

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html> 


Eventos HTML comunes

Aquí hay una lista de algunos eventos HTML comunes:

onchange

Se ha cambiado un elemento HTML.

onclick

El usuario hace clic en un elemento HTML.

onmouseover

El usuario mueve el mouse sobre un elemento HTML.

onmouseout

El usuario aleja el mouse de un elemento HTML.

onkeydown

El usuario presiona una tecla del teclado.

onload

El navegador ha terminado de cargar la página.

La lista es mucho más larga: Eventos DOM HTML de referencia de JavaScript de W3Schools.


Controladores de eventos de JavaScript

Los controladores de eventos se pueden utilizar para manejar y verificar la entrada del usuario, las acciones del usuario, y acciones del navegador:

  • Cosas que se deben hacer cada vez que se carga una página

  • Cosas que se deben hacer cuando la página está cerrada

  • Acción que se debe realizar cuando un usuario hace clic en un botón

  • Contenido que debe verificarse cuando un usuario ingresa datos

  • Y más ...

Se pueden utilizar muchos métodos diferentes para permitir que JavaScript funcione con eventos:

  • Los atributos de eventos HTML pueden ejecutar código JavaScript directamente

  • Los atributos de eventos HTML pueden llamar a funciones de JavaScript

  • Puede asignar sus propias funciones de controlador de eventos a elementos HTML

  • Puede evitar que se envíen o gestionen eventos

  • Y más ...

Aprenderá mucho más sobre eventos y controladores de eventos en los capítulos de HTML DOM.