Eventos

São formas de mapear as ações do usuário na página e com eles podemos criar comportamentos novos em resposta como animações, abertura/fechamento de menus, troca de imagens... Os principais eventos mapeados são movimento e clique do mouse, carregamento de página, rolagem e etc.

Load

É ativado ao carregar a página do navegador, podendo rastrear quando isso acontece e tomar ações perante.

window.onload = function() {
console.log("Terminou de carregar o DOM");
}

console.log("Carregou o arquivo js");

Click

É acionado quando um elemento com esse evento mapeado é clicado.

let button = document.querySelector(".btn");
console.log(button);

button.addEventListener("click", function() {
console.log("clicou");
this.style.color = "red"; //o elemento clicado terá texto vermelho
});

Double click

É acionado quando um elemento com esse evento mapeado é clicado duas vezes seguidamente.

button.addEventListener("dbclick", function() {
console.log("clicou duplamente");
});

Mouse

Eventos associados a movimentação do mouse.

Over

let title = document.querySelector("h1");
console.log(title);

title.addEventListener("mouseover", function() {
console.log("passou");
this.style.color = "yellow"; //o elemento clicado terá texto amarelo
});
``

### Out
```js
let title = document.querySelector("h1");
console.log(title);

title.addEventListener("mouseout", function() {
console.log("saiu");
this.style.color = "black"; //o elemento clicado terá texto preto
});

Key

É acionado caso a tecla mapeada sofra alguma alteração.

Down

É disparado quando a tecla mapeada é pressionada.

document.addEventListener("keydown", function(e) {
let key = event.key;
console.log("tecla " + key + " pressionada"); //executa enquanto a tecla tiver sido pressionada ou estiver sendo pressionada

if(key === "Enter") {
console.log("pressionou enter");
}
});

Up

É disparado quando a tecla mapeada é solta.

document.addEventListener("keyup", function(e) {
let key = event.key;
console.log("tecla " + key + " solta");

if(key === "Enter") {
console.log("enter solto");
}
});