为什么手动设置目标时不调度 OnChange 事件

Question

我对 JavaScript 如何处理 Change Events 感到困惑，正在寻找一些见解。

假设我们有两个 HTML 控件；一个复选框和一个按钮，我想使用 JS 显示一条消息，说明复选框从checked 更改为not-checked 的次数。

<input type="checkbox" id="cb" />
<button id="btn">Change Checkbox</button>
<div id="msg"></div>

JS 可能看起来像这样：

var count = 0;
var cb = document.getElementById("cb");
var btn = document.getElementById("btn");
var msg = document.getElementById("msg");
cb.addEventListener("change", cb_onChange);
btn.addEventListener("click", btn_onClick);

// Change the state of the Checkbox when user clicks the Button
function btn_onClick() {
cb.checked = !cb.checked;
}

// The state of the Checkbox has changed, so increment the change count and display it
function cb_onChange() {
msg.innerHTML = "Checkbox changed " + count+++" times";
}

在这里测试一下http://jsfiddle.net/26RWh/

请注意，当Checkbox 以编程方式设置为cb.checked = !cb.checked 时，不会调度Checkbox 的OnChange 事件。 - 即 cb_onChange 侦听器仅在/当用户手动单击复选框时才会执行。

为什么我在代码中更改状态时没有触发OnChange 事件？

Answer 1

这是输入元素上的事件在 javascript 中的工作方式。

如果您希望回调被执行，您需要手动触发复选框上的更改事件。

对此有疑问：

do it in pure JavaScript

and with help of jquery

Answer 2

当浏览器在复选框中识别出一个更改事件时，它会将选中的属性设置为 !checked 并调用您可以假设发生在一个函数（f1）中的订阅函数，并且在事件发生时调用该函数。在这种情况下，您不调用函数 f1 ，而只是设置属性。