JavaScript

Ativar um evento onchange manualmente com JavaScript

27 de janeiro de 2022

Ativar um evento onchange manualmente com JavaScript

Neste artigo você vai aprender a como ativar um evento onchange manualmente com JavaScript, utilizando poucas linhas de código!

Ativar um evento onchange manualmente capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x