IE上的onchange事件和编程输入值更改冲突答案

【问题标题】：onchange event and programmatic input value change conflict on IEIE上的onchange事件和编程输入值更改冲突
【发布时间】：2017-12-08 11:31:38
【问题描述】：

我注意到，在不同版本的 Internet Explorer 中，onchange 事件当输入的值被 js 函数更改时不会捕获，其他浏览器不会发生这种行为例如 Mozilla 或 Chrome。

调查了一下发现onchange在IE中被js修改值时不能保证正确操作：

onchange not fired on IE
onchange not fired when autocomplete is on

示例（在 IE 上测试）：

function onchangeRequest(){
  console.log('onchange fired');
}

function changeValue (input){
  input.value +=  "hello"
}

<h4> focus lost doesnt invoke onchangeRequest() </h4>

<input id="valueInput"  onkeyup="changeValue(this);" onchange="onchangeRequest();" />

<h4> focus lost invokes onchangeRequest() </h4>

<input id="valueInput" onchange="onchangeRequest();" />

对于 IE 无法正确解决这些情况的原因，我还没有找到令人信服的解释。这是我们必须处理的“已知错误”吗？是否有任何官方参考说明 IE 不保证 onchange 事件的正确行为？

【问题讨论】：

标签： javascript html internet-explorer

【解决方案1】：

我发现微软多年来一直在遵循其浏览器不遵循 W3C 标准的策略，但根据 IE 自己的规范，这种行为是正确的：

onchange事件在选择对象的选定选项以编程方式更改时，不会触发。

参考：MSDN - onchange event

解决此问题并使您的解决方案跨浏览器的一种可能的解决方法是：

onfocus：将输入值保存在expando property
onblur：调用一个js函数，将旧值与当前值进行比较。

在我的现实生活场景中，我需要在输入值更改时触发 ajax 操作，因此在不比较更改的情况下使用 onblur 事件会导致对后端进行大量不必要的调用。

这是一个例子：

function onchangeRequest(input){
  if(input.value != input.oldValue){
      console.log('value changed: do ajax request');
  }else{
      console.log('value didnt change');
  }
}

function changeValue (input){
     input.value +=  "add"
 }

&lt;input id="valueInput" onkeyup="changeValue(this);" onfocus="this.oldValue = this.value;" onblur="onchangeRequest(this);" /&gt;

【讨论】：