Eventos Javascript

Los eventos HTML son “cosas” que le suceden a los elementos HTML. Cuando se usa JavaScript en páginas HTML, JavaScript puede “reaccionar” ante estos eventos.

Eventos HTML

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

Aquí hay algunos ejemplos de eventos HTML:

  • Una página web HTML ha terminado de cargarse.
  • Se modificó un campo de entrada HTML.
  • Se hizo clic en un botón HTML.

A menudo, cuando ocurren 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 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 elemento <button>.

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    	<button type="button" onclick="document.getElementById('demo').
        innerHTML = Date()">La hora es</button>
        
        <p id="demo"></p>
    </body>
</html>

En el ejemplo anterior, el código JavaScript cambia el contenido del elemento con id = “demo”. En el siguiente ejemplo, el código cambia el contenido de su propio elemento (usando this.innerHTML).

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    <button onClick="this.innerHTML=Date()">La hora es</button>
    </body>
</html>

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

Ejm

<!DOCTYPE html>
<html lang="es">
	<p>Haz click en el botón para mostrar la fecha</p>
    <button type="button" onClick="displayDate()">La fecha es</button>
    
    <script>
		function displayDate()
		{
			document.getElementById("demo").innerHTML=Date();	
		}
	</script>
    
    <p id="demo"></p>
</html>

Eventos HTML comunes

Aquí hay una lista de algunos eventos HTML comunes.

Evento Descripción
onchange Un elemento HTML ha sido cambiado
onclick El usuario hace clic en un elemento HTML
onmouseover El usuario mueve el ratón encima del elemento HTML
onmouseout El usuario aleja el mouse de un elemento HTML
onkeydown El usuario empuja una tecla del teclado
onload El navegador ha terminado de cargar la página.

¿Qué puede hacer JavaScript?

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

  • Cosas que deben hacerse cada vez que se carga una página
  • Cosas que deben hacerse cuando la página está cerrada
  • Acción que debe realizarse cuando un usuario hace clic en un botón
  • Contenido que debe verificarse cuando un usuario ingresa datos
  • Y más …

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

  • Los atributos de evento HTML pueden ejecutar código JavaScript directamente
  • Los atributos de evento 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 …