Como ativar um evento de click com JavaScript

Neste artigo você vai aprender a como ativar um evento de click com JavaScript, vamos utilizar uma simples abordagem para isso!

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e eventos!

Ativar um evento de click com JavaScript é uma tarefa muito comum e importante no desenvolvimento de páginas web interativas.

O evento de click é acionado quando um usuário clica em um elemento da página, como um botão ou link, e é uma das maneiras mais comuns de iniciar uma ação do usuário.

Neste artigo, vamos explorar como ativar um evento de click com JavaScript sem a ajuda da biblioteca jQuery.

Para começar, vamos dar uma olhada na sintaxe básica do evento de click em JavaScript.

O evento é acionado quando um elemento da página é clicado e pode ser definido usando o método addEventListener().

Aqui está um exemplo simples:

const botao = document.querySelector('#botao');
botao.addEventListener('click', function() {
  // código a ser executado quando o botão é clicado
});

Neste exemplo, selecionamos o elemento do botão usando o método querySelector() e, em seguida, adicionamos um ouvinte de eventos usando o método addEventListener().

O método addEventListener() recebe dois argumentos: o nome do evento a ser ouvido (no nosso caso, ‘click’) e a função a ser executada quando o evento é acionado.

Você também pode definir um evento de click diretamente no HTML usando o atributo “onclick”. Aqui está um exemplo:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

<button onclick="minhaFuncao()">Clique aqui</button>

Neste exemplo, definimos o evento de click diretamente no elemento do botão usando o atributo “onclick”. Quando o botão é clicado, a função “minhaFuncao()” é executada.

No entanto, é importante notar que definir eventos diretamente no HTML não é uma prática recomendada.

Em vez disso, é melhor definir eventos de forma separada usando JavaScript, o que torna o código mais organizado e fácil de manter.

Além disso, você pode usar a função addEventListener() de forma mais abreviada, como mostrado abaixo:

const botao = document.querySelector('#botao');
botao.onclick = function() {
  // código a ser executado quando o botão é clicado
};

Neste exemplo, em vez de usar o método addEventListener(), estamos atribuindo uma função ao evento onclick do botão.

Isso é útil para eventos simples, como um evento de click, mas não é recomendado para eventos mais complexos.

Também é possível ativar um evento de click programaticamente usando o método dispatchEvent(). Aqui está um exemplo:

const botao = document.querySelector('#botao');
const evento = new Event('click');
botao.dispatchEvent(evento);

Neste exemplo, criamos um evento de click usando o construtor Event() e, em seguida, usamos o método dispatchEvent() para acionar o evento programaticamente.

Além disso, você pode usar o método click() para ativar um evento de click programaticamente.

Aqui está um exemplo:

const botao = document.querySelector('#botao');
botao.click();

Neste exemplo, usamos o método click() para acionar o evento de click programaticamente no botão selecionado.

Em resumo, ativar um evento de click com JavaScript é uma tarefa simples e importante para a criação de páginas web interativas.

Você pode usar o método addEventListener() para definir um ouvinte de eventos, a propriedade onclick para eventos simples, e os métodos dispatchEvent() e click() para ativar um evento de click.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Ativar um evento de click com JavaScript é uma tarefa fundamental para desenvolvedores web que desejam criar interatividade em suas páginas.

Neste artigo, exploramos diversas maneiras de definir e acionar eventos de click com JavaScript sem a necessidade da biblioteca jQuery.

Através do método addEventListener(), podemos definir um ouvinte de eventos para o elemento desejado, ou através da propriedade onclick para eventos simples.

Para acionar o evento programaticamente, podemos usar os métodos dispatchEvent() e click().

Agora que você conhece as diferentes maneiras de ativar eventos de click com JavaScript, pode criar páginas web mais interativas e responsivas.

Lembre-se de escolher a abordagem mais adequada para o seu projeto, levando em consideração a complexidade do evento e a necessidade de manutenção do código.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Qual a diferença entre .click() e o clique real do usuário?

O método .click() dispara o evento de click do jeito programático, ou seja, sem ninguém encostar no mouse

Ele roda todos os ouvintes de click que você registrou naquele elemento, igual a um clique de verdade

Use cases clássicos: acionar um input de arquivo escondido, disparar um botão dentro de um teste, ou refazer uma ação sem o usuário clicar de novo

Se liga num exemplo bem comum, o input de arquivo escondido:

const input = document.querySelector(‘#arquivo’); const botao = document.querySelector(‘#botao’); botao.addEventListener(‘click’, () => { input.click(); });

Porém tem um detalhe importante: o clique feito por .click() não é um clique ‘confiável’ (o navegador marca ele como isTrusted false)

Na prática isso significa que algumas ações que EXIGEM interação real do usuário podem ser bloqueadas pelo navegador, tipo abrir uma nova aba ou entrar em tela cheia

Pra clique normal em botão e link isso não te atrapalha, mas é bom saber que existe

Como remover um evento de click? (removeEventListener)

Colocar o ouvinte tu já sabe, mas e pra TIRAR ele depois?

Aí entra o removeEventListener(), e tem uma pegadinha: você precisa passar a MESMA função que usou pra adicionar

Por isso a função tem que estar numa variável, função anônima solta não dá pra remover:

const botao = document.querySelector(‘#botao’); function aoClicar() { console.log(‘cliquei’); } botao.addEventListener(‘click’, aoClicar); // mais pra frente, quando quiser parar de ouvir: botao.removeEventListener(‘click’, aoClicar);

Já me ferrei uma vez tentando remover uma função anônima e não saía nunca haha

Se você só quer que o click rode UMA vez e sumir sozinho, tem um atalho massa, o terceiro argumento com { once: true }:

botao.addEventListener(‘click’, aoClicar, { once: true });

Assim o próprio navegador remove o ouvinte depois do primeiro clique, sem você fazer nada

addEventListener, onclick, dispatchEvent e click(): qual usar?

O post te mostrou quatro caminhos, então bora resumir quando cada um brilha, pra tu não ficar na dúvida na hora H

addEventListener(): é o padrão pro dia a dia, deixa registrar vários ouvintes no mesmo elemento sem um atropelar o outro

onclick (propriedade): serve pra caso simples e rápido, mas só aceita UMA função por elemento, se atribuir outra ela sobrescreve a anterior

dispatchEvent(): quando você quer DISPARAR um evento de click via código, útil pra simular interação em testes ou fluxos automáticos

click(): o atalho pronto pra simular o clique naquele elemento específico, sem precisar montar o Event na mão

Regra de bolso: pra ouvir clique vai de addEventListener, pra simular clique vai de click()

E se eu tiver vários botões? Delegação de eventos

Uma coisa que faltava aqui e hoje é quase obrigatória: quando você tem MUITOS elementos clicáveis, não precisa colocar um addEventListener em cada um

Você coloca UM ouvinte no elemento pai e descobre quem foi clicado pelo event.target

Isso se chama delegação de eventos, e é ULTRA útil pra listas que mudam sozinhas (itens que aparecem depois via JavaScript):

const lista = document.querySelector(‘#lista’); lista.addEventListener(‘click’, (event) => { if (event.target.matches(‘button’)) { console.log(‘clicou no botão’, event.target); } });

Repara no parâmetro event que a função recebe: é o objeto do evento, e dele tu tira quem foi clicado, a posição do mouse e por aí vai

Um ouvinte só cuidando de vários botões, mais leve e mais fácil de manter

Perguntas frequentes sobre evento de click no JavaScript

Como disparar um clique sem o usuário clicar? Use o método click() no elemento, tipo botao.click(), que o navegador roda os ouvintes de click registrados nele

Qual a diferença entre onclick e addEventListener? O onclick aceita só uma função por elemento e sobrescreve se você atribuir outra, já o addEventListener deixa registrar vários ouvintes no mesmo elemento sem conflito

Como pegar qual elemento foi clicado? Dentro da função do evento, use o event.target, ele aponta pro elemento exato que recebeu o clique

Dá pra rodar o click só uma vez? Dá sim, passe { once: true } como terceiro argumento do addEventListener e o navegador remove o ouvinte depois do primeiro clique