HTML DOM permite que JavaScript reaja a eventos HTML:
Um JavaScript pode ser executado quando ocorre um evento, como quando um usuário clica em um elemento HTML.
Para executar código quando um usuário clica em um elemento, adicione código JavaScript a um atributo de evento HTML:
onclick=JavaScriptExemplos de eventos HTML:
Quando um usuário clica com o mouse
Quando uma página da web é carregada
Quando uma imagem foi carregada
Quando o mouse passa sobre um elemento
Quando um campo de entrada é alterado
Quando um formulário HTML é enviado
Quando um usuário pressiona uma tecla
Neste exemplo, o conteúdo do elemento <h1> é alterado quando um usuário clica nele:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>
Neste exemplo, uma função é chamada a partir do manipulador de eventos:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Para atribuir eventos a elementos HTML você pode usar atributos de evento.
Atribua um evento onclick a um elemento de botão:
<button onclick="displayDate()">Try it</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>
No exemplo acima, uma função chamada displayDate será executada quando o botão é clicado.
O HTML DOM permite atribuir eventos a elementos HTML usando JavaScript:
Atribua um evento onclick a um elemento de botão:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
No exemplo acima, uma função chamada displayDate é atribuída a um elemento HTML com o id="myBtn".
A função será executada quando o botão é clicado.
Os eventos onload e onunload são acionados quando o usuário entra ou sai da página.
O evento onload pode ser usado para verificar o tipo e a versão do navegador do visitante e carregar a versão adequada da página da web com base nas informações.
Os eventos onload e onunload podem ser usados para lidar com cookies.
<body onload="checkCookies()">Experimente você mesmo →
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
O evento onchange é frequentemente usado em combinação com a validação de campos de entrada.
Abaixo está um exemplo de como usar o onchange. O maiúsculas() A função será chamada quando um usuário alterar o conteúdo de um campo de entrada.
<input type="text" id="fname"
onchange="upperCase()">Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Os eventos onmouseover e onmouseout podem ser usados para acionar uma função quando o usuário passa o mouse sobre ou fora de um elemento HTML:
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
Os eventos onmousedown, onmouseup e onclick são todas partes de um clique do mouse. Primeiro, quando um botão do mouse é clicado, o evento onmousedown é acionado, então, quando o botão do mouse é liberado, o evento onmouseup é acionado e, por fim, quando o clique do mouse é concluído, o evento onclick é acionado.
Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
onmousedown e onmouseup
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>Click mouse and hold down!</p>
</body>
</html>
Altere uma imagem quando um usuário mantém pressionado o botão do mouse.
carregando
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Exiba uma caixa de alerta quando a página terminar de carregar.
No foco
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
</body>
</html>
Altere a cor de fundo de um campo de entrada quando ele estiver em foco.
Eventos de mouse
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Altere a cor de um elemento quando o cursor passa sobre ele.
Para obter uma lista de todos os eventos HTML DOM, consulte nossa referência completa de objeto de evento HTML DOM.