# Eventos
%[https://www.youtube.com/watch?v=KCr_qZfNxQU&list=PLcQQun5wwBt6UHHlRv6wcFVgahOHPAhWb&index=9]
[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768417689084/0d93df31-1868-4e62-b3e8-25df344bb4a8.jpeg align="center")](https://www.udemy.com/course/logica-de-programacao-com-pascalzim/?referralCode=E547897C16AD4FF23AED)
Quando acontece alguma ação no sistema estamos nos deparando com um evento.
O sistema irá disparar algum tipo de sinal quando o evento acontecer.
### Exemplo de eventos:
* Ao clicar com o mouse sobre um elemento ou passar o cursor sobre o mesmo.
* Ao pressionar uma tecla do teclado.
* Ao redimensionar ou fechar a janela do browser.
* Ao terminar de carregar a página.
* Ao fazer um submit em um formulário.
* Ao reproduzir, interromper ou encerrar um vídeo.
* Ao retornar um erro.
### Terminologia
Eventos são disparados ou propagados
Quando um evento ocorre, muitas das vezes ele é descrito como tendo sido **disparado** ou **propagado**.
### Eventos disparam scripts
Diz-se que eventos **disparam** uma função ou script.
### Podemos definir um evento em 3 passos:
**Passo 1**: Selecione o elemento
**Passo 2**: Especifique o evento
**Passo 3:** Chame o código
### Há três tipos de rotinas de tratamento de evento
* **Rotinas de tratamento de evento HTML**
Essa é uma prática ruim, mas você precisa estar ciente dela porque talvez você a veja em códigos mais antigos.
* **Rotinas DOM tradicionais**
Rotinas de tratamento de evento DOM foram introduzidas na especificação original do DOM.
Elas são consideradas melhores que as rotinas de tratamento de evento HTML porque permitem separar o JavaScript da HTML.
* **Ouvintes de eventos DOM nível 2**
Os ouvintes de evento foram introduzidos em um atualização da especificação DOM. Eles agora são a maneira preferível de manipular eventos.
### Rotinas de tratamento de evento HTML
As versões anteriores da HTML incluíam um conjunto de atributos que podiam responder a eventos no elemento ao qual eles eram adicionados.
O código abaixo indica que, quando clicar nesse elemento <a> a função alert() seria invocada.
### Exemplo
```jsx
click here
```
Copie e cole o código no codepen para visualizar o resultado. [https://codepen.io/](https://codepen.io/)
### Rotinas de tratamento de evento DOM / Event handler
É um bloco de código que será executado quando o evento for disparado.
### Exemplo
```markdown
```
```jsx
function showMessage() {
alert('Você clicou no botão e exibiu esse alerta');
}
var btn = document.querySelector('button');
btn.onclick = showMessage;
```
Copie e cole o código no codepen para visualizar o resultado. [https://codepen.io/](https://codepen.io/)
### Ouvintes de evento / Event listener
Escutam o evento acontecendo, e o manipulador é o código que roda em resposta a este acontecimento.
### Exemplo
```markdown
```
```jsx
var btn = document.querySelector('button');
btn.addEventListener('click',function() {
alert('Você clicou no botão e exibiu esse alerta');
}, false);
```
Copie e cole o código no codepen para visualizar o resultado. [https://codepen.io/](https://codepen.io/)
### Diferentes tipos de evento
Eventos de IU
* load
A página terminou de carregar.
* unload
A página está carregando.
* error
O navegador encontra um erro de JavaScript.
* resize
A janela do navegador foi redimensionada.
* scroll
O usuário rolou a página para cima ou para baixo.
---
Eventos de teclado
* keydown
O usuário pressiona uma tecla (repete enquanto a tecla é pressionada).
* keyup
O usuário solta uma tecla.
* keypress
Caracteres estão sendo inseridos (repete enquanto a tecla é pressionada).
---
Eventos de mouse
* click
O usuário pressiona e solta um botão sobre o mesmo elemento.
* dbclick
O usuário pressiona e solta um botão duas vezes sobre o mesmo elemento.
* mousedown
O usuário pressiona um botão do mouse sobre um elemento.
* mouseup
O usuário solta um botão do mouse sobre um elemento.
* mousemove
O usuário move o mouse (não em uma tela sensível ao toque).
* mouseover
O usuário move o mouse para cima de um elemento (não em uma tela sensível ao toque).
* mouseout
O usuário move o mouse para fora de um elemento (não em uma tela sensível ao toque).
---
Eventos focus
* focus / focusin
O elemento ganha o foco.
* blur / focusout
O elemento ganha o foco.
---
Eventos de formulário
* input
O valor de um elemento ou ou é alterado.</p> </body>
* change
O valor em uma caixa de seleção/verificação ou radio button muda.
* submit
O usuário envia um formulário.
* reset
O usuário clica no botão reset de um formulário.
* cut
O usuário corta o conteúdo de um campo de formulário.
* copy
O usuário copia o conteúdo de um campo de formulário.
* paste
O usuário cola o conteúdo de um campo de formulário.
* select
O usuário seleciona um texto em um campo de formulário.
Eventos de mutação
* DomSubtreeModified
Uma alteração foi feita no documento.
* DomNodeInserted
Um nó foi inserido como um filho direto de outro nó.
* DomNodeRemoved
Um nó foi removido a partir de outro nó.
* DomNodeInsertedIntoDocument
Um nó foi inserido como um descendente de um outro nó.
* DomNodeRemovedFromDocument
Um nó foi removido como um descendente de um outro nó.
---
### O objeto event
Quando um evento ocorre, o objeto **event** exibe informações sobre o evento.
```markdown
click
```
```jsx
function clickElement(e) {
let target = e.target;
console.log(target);
// OUTPUT: "click"
console.log(e);
// OUTPUT: MouseEvent {isTrusted: true, screenX: 2848, screenY: -1, clientX: 1568, clientY: 288, …}
}
var el = document.getElementById('user');
el.addEventListener('click', clickElement, false);
```
Objeto Event
* target
O alvo do evento.
* type
Tipo do evento que foi disparado.
* cancelable
Se você pode cancelar o comportamento padrão de um elemento.
---
Objeto Event
* preventDefault
Cancelar o comportamento padrão do evento.
* stopPropagation
Impede que o evento se propague ou seja capturado novamente.
Referência de eventos