Eventos HTML são "coisas" que acontecem com elementos HTML.
Quando JavaScript é usado em páginas HTML, JavaScript pode "reagir" em estes eventos.
Um evento HTML pode ser algo que o navegador faz ou algo que um usuário faz.
Aqui estão alguns exemplos de eventos HTML:
Uma página da web HTML terminou de carregar
Um campo de entrada HTML foi alterado
Um botão HTML foi clicado
Muitas vezes, quando os eventos acontecem, você pode querer fazer alguma coisa.
JavaScript permite executar código quando eventos são detectados.
O HTML permite que atributos do manipulador de eventos, com código JavaScript, sejam adicionados aos elementos HTML.
Com aspas simples:
<element
event='some JavaScript'>Com aspas duplas:
<element
event="some JavaScript">No exemplo a seguir, um atributo onclick (com código) é adicionado a um Elemento <button>:
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
No exemplo acima, o código JavaScript altera o conteúdo de o elemento com id="demo".
No próximo exemplo, o código altera o conteúdo de seu próprio elemento (usando this.innerHTML):
<button onclick="this.innerHTML = Date()">The time is?</button>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
O código JavaScript geralmente tem várias linhas. É mais comum ver atributos de eventos chamando funções:
<button onclick="displayDate()">The time is?</button>Experimente você mesmo →
<!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>
Aqui está uma lista de alguns eventos HTML comuns:
Um elemento HTML foi alterado
O usuário clica em um elemento HTML
O usuário move o mouse sobre um elemento HTML
O usuário afasta o mouse de um elemento HTML
O usuário pressiona uma tecla do teclado
O navegador terminou de carregar a página
A lista é muito mais longa: W3Schools JavaScript Reference HTML DOM Events.
Os manipuladores de eventos podem ser usados para manipular e verificar a entrada do usuário, ações do usuário, e ações do navegador:
Coisas que devem ser feitas sempre que uma página carrega
Coisas que devem ser feitas quando a página é fechada
Ação que deve ser executada quando um usuário clica em um botão
Conteúdo que deve ser verificado quando um usuário insere dados
E mais ...
Muitos métodos diferentes podem ser usados para permitir que o JavaScript funcione com eventos:
Atributos de evento HTML podem executar código JavaScript diretamente
Atributos de eventos HTML podem chamar funções JavaScript
Você pode atribuir suas próprias funções de manipulador de eventos a elementos HTML
Você pode impedir que eventos sejam enviados ou manipulados
E mais ...
Você aprenderá muito mais sobre eventos e manipuladores de eventos nos capítulos HTML DOM.