Código do Vídeo:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Eventos HTML</title> </head> <body> <button id="btn1">Ação 1</button> <input id="input1" type="text" /> </div> <script> function teste() { console.log("Olá Mundo"); } //document.getElementById("btn1").onclick = teste; document.getElementById("btn1").onmouseover = teste; document.getElementById("input1").onkeyup = function(){ console.log("tecla pressionada"); }; </script> </body> </html>
O que são Eventos?
Eventos são ações que ocorrem na sua página. Eles deixam a página mais dinâmica e interessante. O JavaScript pode manipular eventos, que são blocos de código executados quando a ação for disparada.
Como aplicar/fazer um Evento?
Existem três maneiras de aplicar um evento em JavaScript, são elas:
Adicionar o evento diretamente na tag HTML:
Neste modo, você adicionará o evento diretamente na tag html, criando apenas a função no seu JavaScript:
<!-- Nesta forma, você adicionará o evento na própria tag HTML--> <button id="idDoElemento" onclick="funcao()">Ação</button> <script> // Esta função retorna a frase Olá Mundo no console // quando a mesma for disparada function funcao(){ console.log("Olá Mundo"); } </script>
Acessando a tag pelo ID e atribuindo a propriedade ao evento:
Utilizando o document.getElementById(), você acessará a tag e atribuirá a propriedade ao evento, chamando a função criada:
// Esta função acessa a tag e atribui a propriedade // ao evento document.getElementById("idDoElemento").onclick = funcao;
Outros Eventos JavaScript:
Existe uma infinidade de eventos no JavaScript, veja alguns exemplos abaixo:
onMouseOver:
O evento onMouseOver executa a ação quando o usuário passa o mouse sobre o elemento indicado:
// O usuário executará o evento quando passar // com o mouse por cima do elemento document.getElementById("idDoElemento").onmouseover = teste;
onKeyUp:
O evento onKeyUp executa a ação quando o usuário pressionar e soltar alguma tecla:
// O usuário executará o evento quando // pressionar e soltar alguma tecla document.getElementById("idDoElemento").onkeyup = function(){ console.log("tecla pressionada"); };
onLoad:
O evento OnLoad realizará o evento quando a tela estiver sendo carregada:
window.onload = function () { alert("Ola Mundo"); };
Exercícios
1. Utilizando um evento diretamente em uma tag HTML, crie um evento onClick que retorne uma mensagem no console no momento que o usuário passar com o mouse em cima do botão:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Exercícios</title> </head> <body> <button id="" onclick="">Botão</button> </body> </html>
2. Levando como base o código do exercício 1, transforme o botão em um campo de input e redefina a função onClick para onMouseOver. Refaça o exercício declarando a função de 3 maneiras diferentes. Caso você ainda não tenha assistido os vídeos sobre funções:Funções Parte 1 e Funções Parte 2.
3. Crie um botão com um evento que mostrará um alert. Este alert exibirá a frase: “Clicks = x”, onde x é o número de vezes que o botão foi clicado.