JavaScript Event Listener: Adicionando ouvintes de eventos em JavaScript
Aprenda como adicionar ouvintes de eventos em JavaScript para criar interatividade em suas páginas da web.
Publicado em 1 de agosto de 2023
Glossário
O que são ouvintes de eventos em JavaScript
Introdução
O JavaScript é uma linguagem de programação muito popular e amplamente utilizada para criar interatividade em páginas da web. Uma das características essenciais do JavaScript é a capacidade de responder a eventos, como cliques de mouse, pressionamentos de tecla e movimentos do mouse. Para lidar com esses eventos de forma eficiente, o JavaScript utiliza ouvintes de eventos.
Como funcionam os ouvintes de eventos
Os ouvintes de eventos em JavaScript são blocos de código que são executados quando um determinado evento é acionado em um elemento HTML. Eles permitem que você capture eventos específicos e execute ações correspondentes. Por exemplo, você pode adicionar um ouvinte de eventos a um botão para executar uma função quando o usuário clicar nele.
Adicionando ouvintes de eventos
Ao adicionar um ouvinte de eventos, você precisa especificar o tipo de evento que deseja capturar e a função a ser executada quando o evento ocorrer. Por exemplo, para capturar o evento de clique em um botão, você usaria o evento “click” e definiria a função que deve ser chamada quando o clique ocorrer.
Existem diferentes formas de adicionar ouvintes de eventos em JavaScript. A maneira mais comum é usando o método addEventListener(). Esse método permite que você adicione um ouvinte de eventos a um elemento específico e especifique o tipo de evento e a função a ser executada. Por exemplo, para adicionar um ouvinte de eventos de clique a um botão com o id “meu-botao”, você usaria o seguinte código:
const botao = document.getElementById("meu-botao");
botao.addEventListener("click", minhaFuncao);
Nesse exemplo, “click” é o tipo de evento e minhaFuncao é a função que será executada quando o evento de clique ocorrer. É importante lembrar que a função minhaFuncao deve ser definida anteriormente no código.
Além do método addEventListener(), também é possível adicionar ouvintes de eventos usando o atributo on de um elemento HTML. Por exemplo, você pode adicionar um ouvinte de eventos de clique diretamente em um botão, como este:
<button onclick="minhaFuncao()">Clique aqui</button>
Nesse exemplo, minhaFuncao() é a função que será executada quando o botão for clicado.
Conclusão
Em resumo, os ouvintes de eventos em JavaScript são blocos de código que são acionados quando um evento específico ocorre em um elemento HTML. Eles permitem que você capture eventos do usuário e execute ações correspondentes. Existem várias maneiras de adicionar ouvintes de eventos em JavaScript, como o uso do método addEventListener() ou o atributo on de um elemento HTML. Utilizar ouvintes de eventos é essencial para criar interatividade em páginas da web e proporcionar uma ótima experiência ao usuário.
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...
