javascript - 如果之前以编程方式更改了值，则手动更改值不会触发 onChange 事件

Question

我们有一个输入type = "number"，我们已经设置了一个onChange方法。

输入的默认值为 0。

然后我们以编程方式将值更改为 10。

现在我们再次手动将值更改为 0。

onChange手动更改时不会调用该方法。我认为这是因为当我们以编程方式将它们的值更改为 10 时，没有调用该事件。所以在某种程度上，控件认为该值仍然是 0。

仅当我将值手动设置为程序更改之前的值时才会发生这种情况。如果我使用任何其他值进行手动更改，则onChange事件会正确触发。

Answer 1

以编程方式更改表单控件的值不会触发其更改处理程序，可能是因为更改事件被指定为在用户更改值并且控件失去焦点之后发生。程序化更改不遵循该顺序（尽管可以在元素上调度程序化更改事件，但以编程方式设置焦点和模糊以模仿用户操作并没有帮助）。

HTML5 引入了一个新的输入事件，只要输入接收到用户输入就会触发：

<input id="i0" oninput="alert(this.value);" value="">

您可以使用它而不是 onchange，但它会在每次按键以及将文本粘贴或拖动到输入时触发。

但是请注意，没有浏览器完全支持 HTML5（可能永远不会，因为它是一个移动的目标），因此如果不支持输入事件，您将需要提供功能测试和回退机制。

Answer 2

输入需要关注才能触发 onchange。如果以编程方式设置输入值不会触发 onchange 事件，那实际上是一件好事。它会在输入和代码之间创建一个循环设置。