从内联javascript触发时,onChange事件不会触发

时间:2016-02-14 10:08:36

标签: javascript html html5 javascript-events

请注意,+按钮会更改输入值,并且输入不会按预期触发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" />

2 个答案:

答案 0 :(得分:1)

你可以从这样的javascript发送change事件:

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

演示

&#13;
&#13;
var input = document.querySelector('#number')
input.onchange = function(event){
  alert('change');
}
input.oninput = function(event){
  alert('change');
}
&#13;
<button onclick="number.value++;number.dispatchEvent(new Event('change'))">+</button>
<input type="number" id="number" value="0" />
&#13;
&#13;
&#13;

答案 1 :(得分:0)

对于输入onchange在焦点丢失时发生,而实际上在内容发生更改时发生,但oninput在更改后立即触发。当通过其他控件更改内容时,oninput不会触发。

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

点击此链接:http://www.w3schools.com/tags/ev_oninput.asp

  

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

     

oninput属性在&lt; input&gt;的值时触发。或&lt; textarea&gt;   元素改变了。

     

提示:此事件类似于onchange事件。不同的是   oninput事件紧接在a的值之后发生   元素已更改,而onchange在元素丢失时发生   焦点。另一个区别是onchange事件也可以使用   &LT;密钥生成&GT;和&lt; select&gt;元件。