O evento change é um evento especial que é disparado quando o usuário modifica o valor de certos elementos de entrada. Mais especificamente:

• Quando uma caixa de seleção é marcada ou desmarcada.
• Quando um botão de opção está marcado.
• Quando o usuário faz uma seleção em algo como um date picker ou dropdown menu.
• Quando um input perde o foco (o usuário pressiona tab para o próximo campo ou clica fora do formulário) depois que o usuário alterou o valor.
• Quando o usuário confirma o valor de outra forma, como ao pressionar enter após digitar algum texto.

Observe que o evento change NÃO é disparado quando seu usuário digita em um input. O evento change só será disparado depois que eles tiverem focado em outro elemento. Aqui está um exemplo de uso do evento change com um menu suspenso:

<select id="select-menu">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
<script src="index.js"></script>

const selectMenu = document.getElementById("select-menu");
selectMenu.addEventListener("change", (event) => {
  console.log(You selected: ${event.target.value});
});

Cada vez que o usuário selecionar uma opção diferente do menu suspenso, o evento change será disparado e o valor selecionado será registrado no console. O evento change ainda gera um objeto Event, mas ao contrário da maioria dos outros eventos ele não gera uma implementação personalizada – as únicas propriedades e métodos aos quais você terá acesso são aqueles do objeto base Event. Isto difere do evento input, que gera um objeto InputEvent dedicado. O evento change também difere em alguns aspectos. Um evento input SERÁ acionado quando um usuário digitar conteúdo em um campo, por exemplo. Essas diferenças são importantes para lembrar, pois você pode se confundir com o momento em que esses eventos são disparados.