从内联触发时未触发 onChange 事件 JavaScript

Question

请注意，+ 按钮会更改输入的值，并且输入不会按预期触发 change, input 事件。但是输入本身在更改时会触发事件

这是故意的行为还是我做错了什么？另外我想指出，我希望看到纯 JavaScript 解决方案。

下面的示例演示：

var input = document.querySelector('#number')
input.onchange = function(event){
  alert('change');
}
input.oninput = function(event){
  alert('change');
}

<button onclick="number.value++">+</button>
<input type="number" id="number" value="0" />

Answer 1

对于输入，onchange 在失去焦点时发生，而不是在内容更改时发生，但在进行更改后 oninput 会立即触发。当通过其他控件更改内容时，oninput 不会触发。

所以按下按钮时不会触发任何事件，因为内容是通过其他控件更改的，没有输入，也不会触发模糊。

检查此 link：http://www.w3schools.com/tags/ev_oninput.asp

Definition and Usage The oninput attribute fires when an element gets user input.

The oninput attribute fires when the value of an <input> or <textarea> element is changed.

Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <keygen> and <select> elements.

Answer 2

您可以像这样从 javascript 发送 change 事件：

<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button>

演示

var input = document.querySelector('#number')
input.onchange = function(event){
  alert('change');
}
input.oninput = function(event){
  alert('change');
}

<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button>
<input type="number" id="number" value="0" />

从内联触发时未触发 onChange 事件 JavaScript

onChange event not firing when triggered from inline JavaScript

html

javascript

dom-events