Programação  
 
Rede de conhecimento computador >> Programação >> JavaScript Programação >> Content
O que são eventos em JavaScript [explicado com exemplos]
## 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.

Anterior :

Próximo :
  Os artigos relacionados
·Como Alternar divs com Javascript 
·Como alterar um atributo de classe CSS com Javascript 
·Como Incorporar um link no AS2 
·Como remover o último filho de uma Div jQuery 
·Vs JavaScript. VBScript 
·Como alterar texto HTML na entrada do jQuery 
·Javascript Tutorial para PDF 
·Menus Fácil dinâmico para um site 
·Como definir a largura e altura de um iFrame 
·Como verificar se uma propriedade do objeto existe em J…
  Artigos em destaque
·Como converter INT variável para String 
·Como fazer a interface C para MATLAB 
·Como verificar MouseDown em Visual Basic 
·Como executar um processo em um PC remoto com o WMI 
·Como Obter o CV Módulo em OpenCV para Python 
·Como conceder acesso a um banco de dados MySQL 
·Como aprender SQL Facilmente 
·Como Loop Back Códigos anteriores em Python 
·Como excluir uma tabela do banco de dados Só se ele já…
·Como quebrar uma string em Python 
Cop e direita © Rede de conhecimento computador https://ptcomputador.com Todos os Direitos Reservados