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
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!