Neste artigo você vai aprender a como ativar um evento onchange manualmente com JavaScript, utilizando poucas linhas de código!
Fala programador(a), beleza? Bora aprender mais sobre eventos de DOM e JavaScript!
Para efetuar este evento de change por programação vamos precisar seguir alguns passos
Primeiramente selecionar o elemento alvo, e ter o evento change criado que nós desejamos realizar
Após isso vamos instanciar um objeto a partir da classe Event e ela com o método dispatchEvent vai ativar o evento de change
Veja como isso pode ser feito na prática:
const event = new Event('change');
const element = document.querySelector("#my-select")
element.addEventListener("change", function() {
console.log("Ativado!")
})
element.dispatchEvent(event);
Note que temos tudo que é necessário, a nova instância, a seleção do elemento, o evento change e a ativação do mesmo, que ocorre na última linha
Desta maneira conseguimos ver a mensagem de console.log sendo disparada
Como se houvesse a intervenção manual de um mouse, legal né? 🙂
Conclusão
Neste artigo você aprendeu a como ativar um evento onchange manualmente com JavaScript
Utilizamos uma instância da classe Event, que pode ativar eventos
Isso é feito através do método dispatchEvent
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!