Запуск события, когда флажок изменяется программно с помощью JavaScript

Question

Мне нужно знать, когда флажок был изменен с помощью Javascript с использованием чистого javascript.

Я имею установку «OnChange» событие, которое успешно выполняется, когда пользователь изменяет флажок, но это не работает, когда другая функция JS изменяет его, используя код, как в следующем:

document.getElementById('mycheckbox').checked = true; 

Можно ли запустить событие с использованием чистого JavaScript, когда JS проверяет или отменяет флажок?

Answer 1

Вы можете создать change событие с document.createEvent/initEvent методами, а затем использовать dispatchEvent method для отправки события из указанного checkbox элемента.

var event = document.createEvent("HTMLEvents"); 
event.initEvent('change', false, true); 
checkbox.dispatchEvent(event); 

Это позволит программно изменить checked свойство элемента, а затем вызвать change событие, которое, таким образом, огонь слушателей событий.

Вот простой пример:

var checkbox = document.querySelector('[type="checkbox"]'); 
 
var button = document.querySelector('button'); 
 

 
// Event Listener: 
 
checkbox.addEventListener('change', function(event) { 
 
    alert(event.target.checked); 
 
}); 
 

 
// Programmatically change the `checked` property:' 
 
button.addEventListener('click', function() { 
 
    checkbox.checked = !checkbox.checked; 
 
    triggerEvent(checkbox, 'change'); 
 
}); 
 

 
function triggerEvent(element, eventName) { 
 
    var event = document.createEvent("HTMLEvents"); 
 
    event.initEvent(eventName, false, true); 
 
    element.dispatchEvent(event); 
 
}

<input type="checkbox" /> 
 
<button>Programmatically trigger 'change' event</button>

В качестве альтернативы, вы можете также использовать Event() constructor, однако он имеет меньшую поддержку браузера.

var event = new Event('change'); 
checkbox.dispatchEvent(event); 

Вот пример:

var checkbox = document.querySelector('[type="checkbox"]'); 
 
var button = document.querySelector('button'); 
 

 
// Event Listener: 
 
checkbox.addEventListener('change', function(event) { 
 
    alert(event.target.checked); 
 
}); 
 

 
// Programmatically change the `checked` property:' 
 
button.addEventListener('click', function() { 
 
    checkbox.checked = !checkbox.checked; 
 
    triggerEvent(checkbox, 'change'); 
 
}); 
 

 
function triggerEvent (element, eventName) { 
 
    var event = new Event(eventName); 
 
    element.dispatchEvent(event); 
 
}

<input type="checkbox" /> 
 
<button>Programmatically trigger 'change' event</button>

Answer 2

Вы можете разместить его внутри window.onload, чтобы убедиться, дом готов, $(document).ready equivalent without jQuery

var checkbox = document.getElementById("test-check"); 
 
checkbox.addEventListener("change", checked, false); 
 

 
function checked(e) { 
 
    console.log(e.target.checked) 
 
}

<span> 
 
    <input type="checkbox" id="test-check"> 
 
Test 
 
</span>

Также у вас есть какая-то альтернатива события изменения

Documentation