## Eventos em JavaScript
Eventos são ações ou ocorrências que acontecem em uma aplicação web.
Eles são acionados por interações do usuário, como clicar em um botão, passar o mouse sobre um elemento ou pressionar uma tecla no teclado.
Outros exemplos de eventos incluem redimensionar uma janela, rolar um documento ou carregar uma página.
Os eventos podem ser usados para tornar uma aplicação web mais interativa e responsiva, fornecendo feedback ao usuário e desencadeando ações com base na entrada do usuário.
Manipulação de eventos em JavaScript
Para lidar com eventos em JavaScript, podemos usar ouvintes de eventos.
Ouvintes de eventos são funções chamadas quando um evento específico ocorre em um elemento de destino.
Podemos adicionar um ouvinte de evento a um elemento usando o método `addEventListener()`.
O primeiro argumento para `addEventListener()` é o nome do evento, e o segundo argumento é a função do manipulador de eventos.
```javascript
botão const =document.querySelector('botão');
//Adiciona um ouvinte de evento para o evento 'click' no botão
button.addEventListener('clique', () => {
console.log('O botão foi clicado!');
});
```
No exemplo acima, estamos adicionando um ouvinte de evento a um elemento de botão para o evento `click`.
Quando o usuário clica no botão, a função manipuladora de eventos é executada e a mensagem `O botão foi clicado!` é registrada no console.
Também podemos remover ouvintes de eventos de elementos usando o método `removeEventListener()`.
O primeiro argumento para `removeEventListener()` é o nome do evento, e o segundo argumento é a função do manipulador de eventos.
```javascript
button.removeEventListener('clique', () => {
console.log('O botão foi clicado!');
});
```
No exemplo acima, estamos removendo o ouvinte de evento do evento `click` do elemento botão.
Isso significa que a função manipuladora de eventos não será mais executada quando o usuário clicar no botão.
Objeto de Evento
Quando um evento ocorre, um objeto chamado
objeto de evento é criado.
O objeto de evento contém informações sobre o evento, como o elemento de destino, o tipo de evento e a posição do mouse.
Podemos acessar o objeto de evento em uma função manipuladora de eventos usando o parâmetro `event`.
```javascript
button.addEventListener('clique', (evento) => {
console.log(evento);
});
```
No exemplo acima, estamos registrando o objeto de evento no console.
Isso nos permitirá ver informações sobre o evento click, como o elemento alvo, o tipo de evento e a posição do mouse.
Bubulação e captura de eventos
Borbulhamento de eventos refere-se à maneira como os eventos se propagam pela árvore DOM.
Quando ocorre um evento, ele é acionado primeiro no elemento de destino.
Se o elemento de destino não tiver um ouvinte de evento para o evento, o evento irá aparecer no elemento pai.
Isso continua até que o evento atinja o topo da árvore DOM.
Captura de eventos é o oposto do borbulhamento de eventos.
Quando a captura de eventos está ativada, os eventos são acionados primeiro no topo da árvore DOM e depois propagados até o elemento de destino.
Podemos ativar a captura de eventos definindo o terceiro parâmetro do método `addEventListener()` como `true`.
```javascript
button.addEventListener('clique', (evento), verdadeiro);
```
No exemplo acima, estamos ativando a captura de eventos para o evento `click` no elemento botão.
Isso significa que o evento `click` será acionado primeiro no topo da árvore DOM e depois se propagará para o elemento botão.
Conclusão
Os eventos são uma parte fundamental do JavaScript e são usados para tornar as aplicações web mais interativas e responsivas.
Ao compreender como os eventos funcionam, podemos criar aplicações web mais agradáveis e fáceis de usar.