A manipulação de eventos é um conceito importante em JavaScript. Os eventos permitem que as páginas HTML sejam dinâmicas e interativas, permitindo que você crie interfaces de usuário atraentes. Você pode escrever código para executar JavaScript quando ocorrer um evento no DOM.
Um evento pode ocorrer quando um usuário clica em um elemento HTML, a página é carregada ou quando o valor de um campo de entrada é alterado. Você pode escrever código que altera a estrutura HTML quando ocorre um evento. Aprenda três maneiras diferentes de adicionar ouvintes de eventos ao seu código.
1. O método addEventListener
O método addEventListener é um dos métodos populares métodos de ouvinte de evento. Possui três parâmetros:
- Um objeto que representa o evento.
- Uma função para lidar com isso.
- Um booleano opcional, useCapture, que descreve como o evento se propaga pelo DOM.
O evento pode ser qualquer evento DOM especificado em um elemento de destino. Uma função é configurada para responder a esse evento quando ele ocorre.
A função pode ser anônima ou uma função nomeada. Destinos populares incluem um elemento, seus filhos, um documento e uma janela que oferece suporte a um evento.
O addEventListener() é um método recomendado para administrar ouvintes de eventos em JavaScript. Ele funciona em qualquer destino de evento, não apenas em elementos HTML, e oferece suporte a vários manipuladores de eventos.
Você pode querer executar algum código no DOM. Você pode imprimir texto, realizar cálculos ou exibir uma imagem quando um usuário clicar no botão.
Vamos ilustrar com o seguinte código:
html>
<html>
<corpo>
<h1>O método addEventListener com funçõesh1>
<botãoeu ia="meuBtn">Clique aquibotão>
<peu ia="demonstração">p>
corpo>
html>Em seguida, adicione o ouvinte de evento usando o botão.
const elemento = documento.getElementById("meuBtn");
element.addEventListener("clique", minhaFunção1);
funçãominhaFunção1() {
documento.getElementById("demonstração").innerHTML += "Função executada! "
}
Ao clicar no botão, o texto 'Função Executada' é impresso na tela, conforme a figura abaixo.
2. Delegar eventos para addEventListener
Delegar um evento em JavaScript é um padrão usado para lidar com vários eventos. Em vez de adicionar um ouvinte de evento a cada elemento, basta adicionar o ouvinte de evento a um elemento ancestral. Você pode acessar o elemento que acionou o evento através do .alvo propriedade do objeto de evento.
Isso garante que todos os elementos direcionados tenham comportamento compartilhado. Sem ele, você teria que adicionar um ouvinte de evento a cada um manualmente.
Aqui está um exemplo de delegação de evento:
html>
<html>
<corpo>
<h1> Delegação de eventos em botõesh1>
<div>
<botão>Botão 1botão>
<botão>Botão 2botão>
<botão>Botão 3botão>
div>
corpo>
html>
Em seguida, adicione os ouvintes de eventos a todos os botões com apenas algumas linhas de código.
const div = documento.querySelector('div')div.addEventListener("clique", (evento) => {
se (event.target.tagName 'BOTÃO') {
console.registro('Botão clicado')
}
});
A delegação de eventos é um padrão baseado em bolhas de eventos. Bubbling de evento acontece quando um elemento recebe um evento e o transmite para seus elementos pais e ancestrais no DOM. É um propagação de evento conceito que acontece por padrão em JavaScript.
3. Usando o atributo onclick
Você pode usar o atributo onclick para executar o JavaScript quando os usuários clicarem em um elemento. Assim como o método addEventListener, você pode usar o método onclick para imprimir texto, realizar cálculos e alterar recursos de elementos em o DOM.
Você pode adicionar o ouvinte de eventos onclick como um manipulador de eventos inline para o elemento HTML. O evento ocorre quando um usuário clica no elemento. Altere a cor do parágrafo a seguir dinamicamente com o método onclick:
html>
<html>
<corpo>
<h1> Executar eventos onClickh1>
<peu ia="demonstração"ao clicar="minhaFunção()">
Clique em mim para alterar a cor do meu texto.
p>
corpo>
html>No arquivo JavaScript, adicione o seguinte código:
funçãominhafunção() {
documento.getElementById("demonstração").estilo.cor = "vermelho";
}A saída aparecerá como mostrado:
Por que aprender sobre ouvintes de eventos?
Como desenvolvedor de JavaScript, você frequentemente usará ouvintes de eventos em projetos. Você pode criar vários recursos com ouvintes de eventos, incluindo borbulhamento e captura de eventos. Entender esses conceitos facilitará a criação de interfaces dinâmicas em seus aplicativos.
