Question

我对JavaScript处理Change Events的方式感到困惑，并且正在寻找一些见解。

我们说我们有两个HTML控件;一个复选框和一个按钮，我想用JS显示一条消息，说明Checkbox从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/

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

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

Answer 1

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

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

有关于此的问题：

do it in pure JavaScript

and with help of jquery

Answer 2

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

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

2 个答案: