当输入值被JavaScript更改时？

Question

当元素的值通过JavaScript代码更改时，会发生什么事件？例如：

$input.value = 12;

input事件在这里没有帮助，因为更改值的不是用户。

在Chrome上测试时，change事件不会被激发。也许是因为元素没有失去焦点（它没有获得焦点，所以不能失去焦点）？

Answer 1

没有内置事件。您至少有四种选择：

1. 任何时候更改代码中的$input.value时，调用您希望由更改触发的代码
2. 轮询更改
3. 为自己提供一个用于更改值的方法，该方法也会进行通知
4. （3的变体）为自己提供一个属性，用于更改值，这也将执行通知

其中，#1、#3和#4都要求您在代码中执行一些与$input.value=“new value”不同的操作；轮询（选项#2)，是唯一可以直接设置value的代码。

详情：

>

最简单的解决方案：当您在代码中更改$input.value时，调用您希望由更改触发的代码：

$input.value = "new value";
handleValueChange();

轮询更改：

var last$inputValue = $input.value;
setInterval(function() {
    var newValue = $input.value;
    if (last$inputValue != newValue) {
        last$inputValue = newValue;
        handleValueChange();
    }
}, 50); // 20 times/second

轮询有一个坏名声（有充分的理由），因为它是一个持续的CPU消耗者。当标签页没有焦点时，现代浏览器会降低计时器事件（甚至停止它们），这会稍微减轻一点。20次/秒不是现代系统的问题，即使是手机。

但是，投票仍然是一个丑陋的最后手段。

示例：

null

var $input = document.getElementById("$input");
var last$inputValue = $input.value;
setInterval(function() {
    var newValue = $input.value;
    if (last$inputValue != newValue) {
        last$inputValue = newValue;
        handleValueChange();
    }
}, 50); // 20 times/second
function handleValueChange() {
    console.log("$input's value changed: " + $input.value);
}
// Trigger a change
setTimeout(function() {
    $input.value = "new value";
}, 800);

<input type="text" id="$input">

Answer 2

基于@t-j-crowder和@maciej-swist的答案，让我们添加这个答案，使用“.apply”函数来防止无限循环，而无需重新定义对象。

 function customInputSetter(){

  var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
  var originalSet = descriptor.set;

  // define our own setter
  descriptor.set = function(val) {
    console.log("Value set", this, val);
    originalSet.apply(this,arguments);
  }

  Object.defineProperty(HTMLInputElement.prototype, "value", descriptor);
}