Evento: change

El evento change se lo puede asociar a distintos elementos de formularios HTML y su comportamiento depende de cada uno.

Cuando asociamos el evento change a un control de tipo checkbox el mismo se dispara inmediatamente después que lo chequeamos o sacamos la selección. Para los controles de tipo radio también se dispara luego que cambia el estado de selección del mismo.

Para los controles select se dispara el evento change cuando cambiamos el item seleccionado.

Para los controles text y textarea se dispara cuando pierde el foco del control (porque seleccionamos otro control) y hemos cambiando el contenido del mismo.

Problema

Implementaremos una aplicación que muestre un alert cada vez que sucede el evento change para los controles checkbox, radio, select, text y textarea.

<html>
<head>

<script type="text/javascript">

  addEventListener('load',inicio,false);

  function inicio()
  {
    document.getElementById('checkbox1').addEventListener('change',cambiocheckbox,false);
    document.getElementById('radioa').addEventListener('change',cambioradio,false);
    document.getElementById('radiob').addEventListener('change',cambioradio,false);
    document.getElementById('radioc').addEventListener('change',cambioradio,false);
    document.getElementById('select1').addEventListener('change',cambioselect,false);
    document.getElementById('text1').addEventListener('change',cambiotext,false);
    document.getElementById('textarea1').addEventListener('change',cambiotextarea,false);
  }

  function cambiocheckbox()
  {
   alert(document.getElementById('checkbox1').checked);
  }

  function cambioradio()
  {
    alert(document.getElementById('radioa').checked+' '+
          document.getElementById('radiob').checked+' '+
          document.getElementById('radioc').checked);
  }

  function cambioselect()
  {
    alert(document.getElementById('select1').value);
  }

  function cambiotext()
  {
    alert(document.getElementById('text1').value);
  }

  function cambiotextarea()
  {
    alert(document.getElementById('textarea1').value);
  }

</script>

</head>
<body>
Evento change del checkbox:
<input type="checkbox" id="checkbox1" name="checkbox1" checked>
<br>
Evento change del radio:<br>
<input type="radio" name="radio1" id="radioa"><br>
<input type="radio" name="radio1" id="radiob"><br>
<input type="radio" name="radio1" id="radioc"><br>
Evento change del select:
<select name="select1" id="select1">
  <option value="argentina">Argentina</option>
  <option value="chile">Chile</option>
  <option value="uruguay">Uruguay</option>
  <option value="paraguay">Paraguay</option>
  <option value="bolivia">Bolivia</option>
</select>
<br>
<input type="text" name="text1" id="text1">
<br>
<textarea name="text1" id="textarea1" rows="6" cols="80"></textarea>
<br>
</body>
</html>

Creamos una serie de controles de formulario HTML en el body de la página:

Evento change del checkbox:
<input type="checkbox" id="checkbox1" name="checkbox1" checked>
<br>
Evento change del radio:<br>
<input type="radio" name="radio1" id="radioa"><br>
<input type="radio" name="radio1" id="radiob"><br>
<input type="radio" name="radio1" id="radioc"><br>
Evento change del select:
<select name="select1" id="select1">
  <option value="argentina">Argentina</option>
  <option value="chile">Chile</option>
  <option value="uruguay">Uruguay</option>
  <option value="paraguay">Paraguay</option>
  <option value="bolivia">Bolivia</option>
</select>
<br>
<input type="text" name="text1" id="text1">
<br>
<textarea name="text1" id="textarea1" rows="6" cols="80"></textarea>
<br>

En la función inicio asociamos a todos los controles para el evento change un método:

  function inicio()
  {
    document.getElementById('checkbox1').addEventListener('change',cambiocheckbox,false);
    document.getElementById('radioa').addEventListener('change',cambioradio,false);
    document.getElementById('radiob').addEventListener('change',cambioradio,false);
    document.getElementById('radioc').addEventListener('change',cambioradio,false);
    document.getElementById('select1').addEventListener('change',cambioselect,false);
    document.getElementById('text1').addEventListener('change',cambiotext,false);
    document.getElementById('textarea1').addEventListener('change',cambiotextarea,false);
  }

La función cambiocheckbox se dispara cada vez que cambiamos el estado del checkbox (tanto cuando lo seleccionamos como cuando lo deseleccionamos):

  function cambiocheckbox()
  {
   alert(document.getElementById('checkbox1').checked);
  }

La función cambioradio se dispara cada vez que seleccionamos alguno de los tres radio:

  function cambioradio()
  {
    alert(document.getElementById('radioa').checked+' '+
          document.getElementById('radiob').checked+' '+
          document.getElementById('radioc').checked);
  }

La función cambioselect se dispara cuando cambiamos de item del control select:

  function cambioselect()
  {
    alert(document.getElementById('select1').value);
  }

La función cambiotext y cambiotextarea se ejecuta cuando perdemos el foco del control y hemos producido un cambio en su contenido (agregado o borrado caracteres de su interior):

  function cambiotext()
  {
    alert(document.getElementById('text1').value);
  }

  function cambiotextarea()
  {
    alert(document.getElementById('textarea1').value);
  }

Retornar