2

Viendo que estos dos fragmentos de código funcionan igual, quisiera saber si hay alguna diferencia entre click y change a la hora es escuchar los eventos en los elementos checkbox de Javascript.

Prueba con click:

document.addEventListener("DOMContentLoaded", function(e) {
  var allChecksBoxes = document.querySelectorAll("input[type='checkbox']");
  allChecksBoxes.forEach(function(el) {
    el.addEventListener("click", checkOnClick);
  });
});

function checkOnClick() {
  console.log('click: ' + this.value);
}
<h2>Click</h2>
<legend>Elija opción</legend>
<hr />
<input type="checkbox" name="cbxTest" value="1" />Opción 1<br />
<input type="checkbox" name="cbxTest" value="2" />Opción 2<br />
<input type="checkbox" name="cbxTest" value="3" />Opción 3<br />

Prueba con change:

document.addEventListener("DOMContentLoaded", function(e) {
  var allChecksBoxes = document.querySelectorAll("input[type='checkbox']");
  allChecksBoxes.forEach(function(el) {
    el.addEventListener("change", checkOnChange);
  });
});

function checkOnChange() {
  console.log('change: ' + this.value);
}
<h2>Change</h2>
<legend>Elija opción</legend>
<hr />
<input type="checkbox" name="cbxTest" value="1" />Opción 1<br />
<input type="checkbox" name="cbxTest" value="2" />Opción 2<br />
<input type="checkbox" name="cbxTest" value="3" />Opción 3<br />

5
  • 4
    Un evento click sobre un checkbox siempre dispara un evento change, a menos que el checkbox este deshabilitado
    – xavvvier
    Commented el 6 feb. 2018 a las 22:09
  • @xavvvier ¿qué pasaría en un caso y en otro si estuviese deshabilitado? ¿Se puede deducir de eso que es mejor usar change?
    – A. Cedano
    Commented el 6 feb. 2018 a las 22:11
  • 1
    Lo recomendable para utilizar un checkbox seria mas recomendable utilizar change y no click, ya que tu necesitas que haya un cambio en la variable. mientras que con el evento click podria ocurrir algunos errors Commented el 7 feb. 2018 a las 0:00
  • 1
    @Alejo creo que estás basándote en información errónea. Lee el comentario de xavvvier más arriba
    – Mariano
    Commented el 7 feb. 2018 a las 1:35
  • Tienes razon, perdonen Commented el 7 feb. 2018 a las 4:24

1 respuesta 1

1

La única diferencia importante que he observado es que el tiempo de respuesta (activación) del evento change sufre un "retraso" en las versiones menores a 9 del navegador IE debido a que para poder activarse requiere que el checkbox pierda el foco después de presionado.

El evento click no presenta el problema mencionado anteriormente y en vista de ello es recomendable utilizarlo para garantizar el correcto funcionamiento del sistema en todos los navegadores.

También he notado ciertos desperfectos en el funcionamiento del change en los checkbox usando ciertas etiquetas HTML como por ejemplo <label>, situación que no me ha pasado nunca con el evento click. Está información está explicada en detalle en una respuesta dada en SO version inglesa. Aquí el link: Change y Click en checkbox

5
  • 1
    IE9... no es un poco demasiado viejo como para tomarlo en una recomendación?... Entiendo que algunos desarrolladores web tengan el problema de tener que desarrollar para todos, pero no haría un cambio basado en un pequeño porcentaje de usuarios... ¿Y cuál es específicamente el problema con CSS? ¿De dónde estás sacando la info?
    – Mariano
    Commented el 7 feb. 2018 a las 1:33
  • @Mariano La info proviene principalmente de mi experiencia, sin embargo hay otro usuario en StackOverflow página de habla inglesa que habla más extensamente sobre ello. He aquí el link: Change y Click en checkbox
    – Eztronics
    Commented el 7 feb. 2018 a las 10:46
  • @Mariano Responderé una a una tu pregunta: "IE9... no es un poco demasiado viejo como para tomarlo en una recomendación?" Mientras lo sigan usando usuarios nunca será demasiado viejo. Xp está descontinuado es demasiado viejo y aún así gran cantidad de personas aún lo usan en la actualidad.
    – Eztronics
    Commented el 7 feb. 2018 a las 11:17
  • @Mariano "Entiendo que algunos desarrolladores web tengan el problema de tener que desarrollar para todos, pero no haría un cambio basado en un pequeño porcentaje de usuarios..." Realmente el problema no debería ser de algunos desarrolladores sino de todos ya que para un buen diseño y desarrollo web siempre es una exigencia que el sistema en lo posible no esté atado a ningún tipo SO, navegador o dispositivo. Cada usuario es un potencial cliente y es por ello que las personas que contraten tus servicios no les gustaría saber que estás obviando ese "pequeño porcentaje de usuarios".
    – Eztronics
    Commented el 7 feb. 2018 a las 11:23
  • @Mariano "¿Y cuál es específicamente el problema con CSS? ¿De dónde estás sacando la info?" No me refería a css, mis disculpas me refería a HTML, ya he actualizado mi respuesta con la corrección. Uno de los problemas con HTML sucede cuando intentas colocarle al checkbox en conjunto con el evento change <label></label> ya que al hacer click en el label el foco en el checkbox se pierde y genera un comportamiento "extraño" haciendo que el checkbox cambie su valor inmediatamente pierda el foco y vuelva a recuperarlo por el sólo hecho de dar click a ese label. Un Saludo
    – Eztronics
    Commented el 7 feb. 2018 a las 22:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.