Evento onchange - Evento de mudança de um elemento

Neste tutorial de nossa apostila de JavaScript, vamos aprender a usar evento onchange.

Estudar eventos pela Apostila JavaScript Progressivo em PDF

O Evento onchange

O evento onchange é utilizado nos chamados elementos de opção.
Ou seja, o evento dispara uma ação quando uma mudança ocorre em algum elemento.

As sintaxes de uso, são:
Inline:

<elemento onchange="minhaFunaco()">

No código JavaScript

meuObjeto.onchange = function(){
 //codigo da
 //funcao
};

Através do método addEventListener:

meuObjeto.addEventListener("change", minhaFuncao);

Exemplo de uso do evento onchange

Vamos usar uma input para exemplificar o evento onchange.
Iremos digitar algo na caixa de input e depois clicamos fora dela. Quando fizermos isso, tudo o que digitamos vai virar maiúsculo!

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Digite algo: <input type="text" id="meuInput" onchange="minhaFuncao()">
 </body>
</html>

script.js

function minhaFuncao()
{
   var minhaInput=document.getElementById("meuInput");
   minhaInput.value=(minhaInput.value).toUpperCase();
}

O que ocorre é que quando digitamos algo, estamos fazendo uma alteração, uma mudança (change, em inglês).

Quando clicamos fora da input, ela detecta que algo mudou nela e o evento onchange dispara, fazendo o que? Invocando a função minhaFuncao().

Essa função, do JS, vai pegar a input e ligar ela a variável minhaInput.
Agora pegamos o que tem escrito no input: minhainput.value
E fazemos receber essa mesma string, porém transformada em caracteres maiúsculos, através do método toUpperCase(), do objeto String, que já estudamos.

Teste o resultado, digite algo e depois clique fora:

Digite algo:

Ou seja, você deve usar o evento onchange quando desejar detectar alguma mudança, em seus elementos de opção.

Esses elementos, são:

<input> - com type="checkbox", "color", "date", "datetime", "email", "file", "checkbox", "color", "password", "radio", "range", "search", "tel", "text", "time", "url", ou "week"
<select>
<textarea>

Exercício de JavaScript

No script anterior, ao invés de colocar todas as letras para maiúscula, faça com que apareça uma janela de alert, com a string digitada pelo usuário no formulário de input.

JavaScript Progressivo