Evento onchange - Evento de mudança de um elemento

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

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:
  1. <input> - com type="checkbox", "color", "date", "datetime", "email", "file", "checkbox", "color", "password", "radio", "range", "search", "tel", "text", "time", "url", ou "week"
  2. <select>
  3. <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.

Nenhum comentário:

Postar um comentário