Como usar o event listener em JavaScript: guia completo
Aprenda como configurar e utilizar o javascript event listener para adicionar interatividade ao seu código.
Publicado em 8 de agosto de 2023
Glossário
Configurando o event listener em JavaScript
O que é um event listener?
Um event listener é uma função que é executada quando um determinado evento acontece. No contexto do JavaScript, esses eventos podem ser cliques de mouse, pressionamentos de teclado, carregamento de página, entre outros. Configurar um event listener é uma etapa crucial para tornar nosso código mais interativo e responsivo. Nesta seção, iremos aprender como configurar o event listener em JavaScript.
Selecionando o elemento HTML
Antes de criar o event listener, precisamos selecionar o elemento HTML do qual queremos ouvir o evento. Podemos fazer isso utilizando os métodos fornecidos pelo DOM (Document Object Model). Por exemplo, se quisermos configurar um event listener para um botão com o id “meuBotao”, podemos fazer da seguinte forma:
const botao = document.getElementById("meuBotao");Criando o event listener
Agora que temos o elemento selecionado, podemos prosseguir e criar o event listener. Para fazer isso, utilizamos o método addEventListener que está disponível para todos os elementos do DOM. O método recebe dois argumentos: o nome do evento que queremos ouvir e a função que deve ser executada quando o evento ocorrer. Por exemplo, vamos criar um event listener para o evento de clique do botão:
botao.addEventListener("click", () => {
// Código a ser executado quando o botão for clicado
});Utilizando o event listener para responder a eventos
A principal utilidade do event listener é responder a eventos específicos que ocorrem em nosso aplicativo ou site. Com o event listener configurado adequadamente, podemos criar funções personalizadas que serão executadas quando determinado evento acontecer. Isso nos permite adicionar dinamismo e interatividade aos nossos projetos em JavaScript.
Para ilustrar isso, vamos considerar um exemplo em que temos um formulário de contato em nosso site. Podemos utilizar um event listener no botão de envio do formulário para validar os dados antes de serem enviados. Podemos configurar o event listener da seguinte forma:
const formulario = document.getElementById("meuFormulario");
formulario.addEventListener("submit", (event) => {
event.preventDefault(); // Evita o envio padrão do formulário
// Lógica de validação e envio do formulário
});Passando parâmetros para o event listener em JavaScript
Às vezes, pode ser necessário passar parâmetros para a função que será executada pelo event listener. Por exemplo, suponha que tenhamos uma lista de itens e queremos adicionar um event listener para cada item individualmente. Podemos utilizar closures em JavaScript para passar parâmetros para a função do event listener.
Vamos considerar o seguinte exemplo em que temos uma lista e queremos adicionar um event listener a cada item. Podemos fazer isso da seguinte maneira:
const itens = document.getElementsByClassName("item");
for (let i = 0; i < itens.length; i++) {
const item = itens[i];
item.addEventListener("click", (index) => {
// Lógica a ser executada quando um item for clicado
console.log("Item clicado:", index);
}.bind(null, i));
}Removendo o event listener em JavaScript
Em certos casos, pode ser necessário remover um event listener para evitar que a função seja executada novamente. Isso pode acontecer, por exemplo, quando um componente é removido da página ou quando não queremos mais que o event listener esteja ativo.
Para remover um event listener, utilizamos o método removeEventListener, que segue a mesma sintaxe do método addEventListener. Precisamos passar o nome do evento e a função que deve ser removida. Vamos considerar um exemplo em que temos um botão com um event listener e queremos removê-lo quando o botão for clicado:
const botao = document.getElementById("meuBotao");
const minhaFuncao = () => {
console.log("Evento");
botao.removeEventListener("click", minhaFuncao);
};
botao.addEventListener("click", minhaFuncao);Conclusão
Neste artigo, exploramos o uso do event listener em JavaScript e sua importância para o desenvolvimento de aplicações interativas. Aprendemos a configurar o event listener, utilizá-lo para responder a eventos, passar parâmetros e removê-lo quando necessário. O event listener é uma ferramenta poderosa para aprimorar a funcionalidade e a experiência do usuário em nossos projetos JavaScript. Esperamos que este guia completo tenha sido útil para ajudá-lo a entender como usar o event listener em JavaScript.
Passando parâmetros para o event listener em JavaScript
Uma das principais vantagens do JavaScript é a habilidade de passar parâmetros para funções, inclusive aquelas que são executadas por event listeners. Isso nos possibilita personalizar a lógica do evento de acordo com os parâmetros passados. Nesta seção, exploraremos como passar parâmetros para o event listener em JavaScript.
Existem algumas maneiras de passar parâmetros para o event listener. A primeira delas é utilizar a função bind, que nos permite criar uma nova função com os parâmetros pré-definidos. Vamos considerar o exemplo de um botão com um event listener que recebe um parâmetro:
const botao = document.getElementById("meuBotao");
const parametro = "Olá";
const minhaFuncao = (param) => {
console.log(param);
};
botao.addEventListener("click", minhaFuncao.bind(null, parametro));Outra forma de passar parâmetros é utilizando uma closure. Uma closure é uma função que tem acesso a variáveis definidas em seu escopo exterior. Vamos considerar o seguinte exemplo:
const botao = document.getElementById("meuBotao");
const parametro = "Olá";
const minhaFuncao = (param) => {
return () => {
console.log(param);
}
};
botao.addEventListener("click", minhaFuncao(parametro));É importante mencionar que é possível passar qualquer tipo de dado como parâmetro para o event listener em JavaScript, como strings, números, objetos ou até mesmo outras funções. Isso nos dá uma grande flexibilidade para personalizar o comportamento do evento de acordo com a nossa necessidade.
Removendo o event listener em JavaScript
Existem momentos em que precisamos remover um event listener para evitar que a função seja executada novamente. Isso pode ser necessário quando um elemento é removido do DOM ou quando não desejamos mais que o event listener esteja ativo. Nesta seção, discutiremos como remover um event listener em JavaScript.
Para remover um event listener, utilizamos o método removeEventListener, que é o oposto de addEventListener. Assim como ao adicionar um event listener, é necessário passar o nome do evento e a função que deseja ser removida. Vamos considerar um exemplo em que temos um botão com um event listener e queremos removê-lo quando o botão for clicado novamente:
const botao = document.getElementById("meuBotao");
const minhaFuncao = () => {
console.log("Evento");
botao.removeEventListener("click", minhaFuncao);
};
botao.addEventListener("click", minhaFuncao);Conclusão
Neste guia completo, exploramos o uso do event listener em JavaScript. Através do event listener, podemos ouvir eventos específicos que ocorrem em nossas páginas web e executar ações personalizadas em resposta a esses eventos. Aprendemos a configurar o event listener, utilizá-lo para responder a eventos relevantes, passar parâmetros para personalizar a lógica e até mesmo remover o event listener quando necessário. Ao entender esses conceitos, você terá maior controle e flexibilidade no desenvolvimento de aplicações interativas em JavaScript. Esperamos que este guia completo sobre como usar o event listener em JavaScript tenha sido útil para você utilizar essa poderosa ferramenta em seus projetos.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
