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 />
change
?