Seeing that these two pieces of code work the same, I would like to know if there is any difference between click and change at the time of listening to the events in the elements checkbox of Javascript.
Test with 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 /> Test with 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 />