26.12.2024

JavaScript: Como Acionar o Evento onchange Programaticamente?

Resposta Rápida

Para acionar o evento change após atualizar programaticamente o valor em um campo de entrada, crie um novo objeto Event com new Event('change') e despache-o usando o método .dispatchEvent().

let input = document.querySelector('input');
input.value = 'novoValor'; // Atualize o valor aqui
input.dispatchEvent(new Event('change')); // Aciona imediatamente o evento change

O que é um Evento Programático?

Um evento programático é um método de acionar artificialmente eventos que normalmente são ativados por ações do usuário. Quando a interação direta do usuário não é possível e você precisa alterar o valor de um campo de entrada programaticamente, dispatchEvent() torna-se essencial.

Em circunstâncias normais, o evento change é acionado quando o usuário altera o valor de um elemento de entrada. No entanto, quando o valor é alterado através do JavaScript, o evento change não será acionado automaticamente.

Manuseio Adequado com Navegadores Mais Antigos

Seu código deve funcionar corretamente não apenas com versões novas, mas também com versões mais antigas de navegadores, como IE 10 e anteriores. Neste caso, a detecção de recursos torna-se necessária.

if (typeof document.body.dispatchEvent === 'function') {
  el.dispatchEvent(new Event('change')); // Aciona o evento change
} else {
  // Para navegadores mais antigos, use o método obsoleto
  var event = document.createEvent('HTMLEvents');
  event.initEvent('change', false, true);
  el.dispatchEvent(event);
}

Visualização

Imagine seu script como um bonequeiro em um teatro de marionetes:

Antes: A marionete (🤖) não está se movendo.
Script: 🎭.controlar("🤖", "🏃‍♂️"); // O script controla a marionete

Quando a marionete começa a se mover:

Depois: A marionete (🤖) começa a andar (🏃‍♂️)!

Dessa forma, o script informa a plateia (outros manipuladores de eventos) sobre as mudanças que ocorreram:

🎭.anunciarEvento("📣"); // O script anuncia o evento

O mesmo acontece com uma atualização programática do valor do campo de entrada—o evento de mudança precisa ser iniciado manualmente.

Usando jQuery

Se você estiver usando jQuery, o método .trigger() é adequado para acionar o evento de mudança após atualizar o valor do campo de entrada:

$('input').val('novoValor').trigger('change'); // Inicia 'change', como um arauto da época medieval

Essa separação do JavaScript do HTML torna o código mais fácil de manter e ler.

Rastreamento de Mudanças em Tempo Real: o Evento 'input'

Se você precisa rastrear mudanças em tempo real, use o evento 'input' em vez de 'change'. Ele será acionado em cada entrada do usuário ou quando o valor for alterado programaticamente.

input.addEventListener('input', function(event) {
  console.log('Valor do campo de entrada alterado para: ', event.target.value); // Indicador de mudança
});

Métodos Avançados para Configurar Valores

Se você precisa gerenciar mudanças de eventos, preste atenção em Object.getOwnPropertyDescriptor e sobreponha o setter padrão da propriedade value. Quer se aprofundar mais no assunto? Use este link para informações adicionais.

Recursos Úteis

1. .trigger() | Documentação da API jQuery
2. EventTarget: método dispatchEvent() - Web API | MDN
3. javascript - Como posso acionar manualmente um evento onchange? - Stack Overflow
4. Introdução ao Manipulamento de Eventos
5. Evento onchange
6. Criando e acionando eventos - Referência de Eventos | MDN
7. Evento change | Documentação da API jQuery

Video

Navigation