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!

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é? 🙂

Formação Recomendada

Formação Claude Code

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

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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!

Como escutar o evento change com addEventListener:

Antes de disparar o change na mão, vale entender o outro lado da moeda: quem ESCUTA o evento

O addEventListener é o cara que registra o ouvinte no elemento

Ele recebe dois argumentos principais: o nome do evento (no nosso caso ‘change’) e a função que vai rodar quando o evento acontecer

const select = document.querySelector("#my-select")

select.addEventListener("change", function (e) {
console.log("valor novo:", e.target.value)
})

Repara no e ali dentro da função

Ele é o objeto do evento, e o e.target aponta pro elemento que sofreu a mudança

É por isso que dá pra ler o value direto dele, sem precisar selecionar o elemento de novo

E o mais massa: isso vale tanto pra mudança feita pelo usuário quanto pra mudança que você disparou por código com o dispatchEvent, é o mesmo ouvinte atendendo os dois casos =)

onchange ou addEventListener(‘change’)? Qual usar:

Existem três jeitos de amarrar uma função no change, e eles não são iguais

O primeiro é o atributo direto no HTML:

<select id="my-select" onchange="minhaFuncao()"></select>

O segundo é a propriedade no JavaScript:

element.onchange = function () {
console.log("mudou!")
}

O terceiro é o addEventListener, que já vimos ali em cima

E qual a diferença na prática?

Nas duas primeiras formas você tem UM handler só

Se atribuir outra função no onchange, a de antes é sobrescrita e simplesmente some

Já com o addEventListener você pode registrar quantos ouvintes quiser no mesmo elemento, e todos rodam

element.addEventListener("change", validar)
element.addEventListener("change", salvarRascunho)

Os dois vão executar, beleza?

Por isso o addEventListener é o caminho que recomendo pra código de verdade: ele não pisa no que outro trecho do seu projeto já registrou

E de quebra ele tem o removeEventListener pra desligar o ouvinte quando não precisar mais dele

O evento não dispara? A ordem importa:

Tome cuidado com uma armadilha aqui

O dispatchEvent só avisa quem JÁ estava escutando

Se você disparar o evento antes de registrar o addEventListener, não acontece nada, e o pior: nenhum erro aparece no console

Fica aquele silêncio e você achando que o dispatchEvent está quebrado haha

Errado:

element.dispatchEvent(new Event('change'))

element.addEventListener("change", function () {
console.log("nunca vai rodar")
})

Certo:

element.addEventListener("change", function () {
console.log("Ativado!")
})

element.dispatchEvent(new Event('change'))

Outro detalhe que pega muita gente: mudar o value por código NÃO dispara o change sozinho

element.value = "2"
element.dispatchEvent(new Event('change'))

A primeira linha muda o valor, a segunda é que avisa o resto da página que ele mudou

É exatamente por isso que o dispatchEvent existe =)

Perguntas rápidas sobre o change disparado por código:

O evento precisa subir na árvore (bubbles)?

Por padrão o Event que a gente criou não sobe pros elementos pais

Se o seu ouvinte está no formulário e não no campo, ele não vai ser avisado

Pra isso o construtor aceita um segundo argumento:

const event = new Event('change', { bubbles: true })

Aí sim o ouvinte lá no pai escuta a mudança que aconteceu no filho

Dá pra usar isso em input e textarea também?

Sim, a mecânica é a mesma

Seleciona o elemento, registra o ouvinte, cria o Event e chama o dispatchEvent nele

Não tem nada exclusivo de select ali

O evento disparado por código é igual ao do usuário?

Quase

O ouvinte roda do mesmo jeito, mas o evento carrega a informação de que ele não veio de uma interação real do usuário (a propriedade isTrusted)