change vs onchange: Guía Completa con Ejemplos Prácticos

Al trabajar con eventos en JavaScript, es común encontrarse con change y onchange. Aunque pueden parecer similares, existen diferencias clave en su uso y aplicación.

Diferencia entre change y onchange

Evento change:

Se utiliza en JavaScript moderno para agregar un controlador de eventos a un elemento. Es más flexible y permite asociar múltiples funciones al mismo evento.

javascript 
elemento.addEventListener('change', function() {
     console.log('Evento change disparado');
 });

Evento onchange:

Es un atributo de los elementos HTML que permite asignar un único controlador de eventos directamente en el HTML o mediante JavaScript.

html 
<input type="text" onchange="alert('Evento onchange disparado')">

Ejemplos Prácticos

Evento change en un <select>

El evento change se activa cuando el usuario selecciona una nueva opción en un menú desplegable.

html 
<select id="miSelect">
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
</select>

<script>
  const select = document.getElementById('miSelect');
  select.addEventListener('change', () => {
      console.log('Valor seleccionado:', select.value);
  });
</script>

onchange en un <select> directamente en HTML

El evento onchange puede configurarse directamente como atributo del elemento HTML.

html 
<select onchange="alert('Has seleccionado una opción')">
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  <option value="3">Opción 3</option>
</select>

Evento change en una lista <ul> con elementos <li>

Podemos usar change en listas dinámicas que incluyen checkboxes.

html 
<ul id="miLista">
  <li><input type="checkbox" value="1"> Elemento 1</li>
  <li><input type="checkbox" value="2"> Elemento 2</li>
  <li><input type="checkbox" value="3"> Elemento 3</li>
</ul>

<script>
  const lista = document.querySelectorAll('#miLista input[type="checkbox"]');
  lista.forEach(checkbox => {
      checkbox.addEventListener('change', () => {
          console.log(`Checkbox con valor ${checkbox.value} fue ${checkbox.checked ? 'marcado' : 'desmarcado'}`);
      });
  });
</script>

Manejo del evento onChange en botones de opción (radio buttons)

El evento onchange también puede aplicarse a radios.

html 
<form>
  <label><input type="radio" name="opcion" value="1" onchange="alert('Seleccionaste opción 1')"> Opción 1</label>
  <label><input type="radio" name="opcion" value="2" onchange="alert('Seleccionaste opción 2')"> Opción 2</label>
</form>

Evento change en un toggle switch

Los switches suelen estar basados en checkboxes personalizados.

html 
<label class="switch">
  <input type="checkbox" id="toggleSwitch">
  <span class="slider"></span>
</label>

<script>
  const toggle = document.getElementById('toggleSwitch');
  toggle.addEventListener('change', () => {
      console.log(`El toggle está ${toggle.checked ? 'encendido' : 'apagado'}`);
  });
</script>

CSS para el toggle (opcional):

css 
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

Usando change en un campo <input> tipo text

Detectar cambios en el contenido de un campo de texto.

html 
<input type="text" id="miInput" placeholder="Escribe algo">

<script>
  const input = document.getElementById('miInput');
  input.addEventListener('change', () => {
      console.log('Cambio detectado:', input.value);
  });
</script>
  Cuándo usar change o onchange

  • Usa change con addEventListener para mantener tu código limpio y separar la lógica JavaScript del HTML.
  • Usa onchange directamente en HTML para tareas simples o rápidas, aunque no es recomendable para proyectos grandes.