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

adicionar evento de click em uma classe capa

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

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!

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários