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.
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:
<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
):
<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:
<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>
Aquí hay una lista de algunos eventos HTML comunes:
Se ha cambiado un elemento HTML.
El usuario hace clic en un elemento HTML.
El usuario mueve el mouse sobre un elemento HTML.
El usuario aleja el mouse de un elemento HTML.
El usuario presiona una tecla del teclado.
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.
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.