Como adicionar evento de click em uma classe JavaScript

Neste artigo você vai aprender a como adicionar evento de click em uma classe, utilizando a linguagem JavaScript!

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

Para adicionar qualquer evento ou um evento de click a elementos por classe é bem simples

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Precisamos selecionar os elementos com algum método, vou utilizar o querySelectorAll

Que permite selecionar a partir de um seletor de CSS

E depois vamos percorrer essa lista de elementos com o método forEach

Acessar cada um dos elementos nessa iteração e adicionar o evento

Veja como isso é possível através do código:

const myElements = document.querySelectorAll(".my-element")

Array.from(myElements).forEach((el) => {
  el.addEventListener('click', () => {
  	console.log("Testando!")
  });
});

Na primeira linha temos a seleção dos elementos por meio de uma classe, mude para a classe que está no seu projeto

E depois temos o forEach que percorre cada um dos elementos que foram selecionados

Dentro do forEach temos a adição do evento em todos os elementos

Deixe um comentário contando o que achou deste artigo 🙂

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

Conclusão

No artigo de hoje você aprendeu a adicionar evento de click em uma classe

Utilizamos um método de seleção que se chama querySelectorAll, para selecionar todos os elementos a partir de uma classe

Depois adicionamos um iterador nesta lista de elementos, que coloca um evento em cada um dos elementos que foram selecionados anteriormente

Assim os elementos selecionados por um classe tem um evento!

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

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

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!