从嵌入式javascript触发onChange事件不会触发

Question

请注意， +按钮更改输入的值，并且输入未触发change, input按预期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

您可以像这样从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" /> 

Answer 2

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

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

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

定义和用法当元素获取用户输入时，将触发oninput属性。

当更改<input>或<textarea>元素的值时，将触发oninput属性。

提示：此事件类似于onchange事件。 区别在于oninput事件在元素的值更改后立即发生，而onchange事件在元素失去焦点时发生。 另一个区别是onchange事件也适用于<keygen>和<select>元素。