有没有什么办法可以监听到value的改变?

Question

大家有没有什么办法可以监听到input元素value属性的改变，value是通过外部js改变的，而不是通过鼠标键盘输入改变的

input.value = 50; // onchange或者oninput事件是不行的

注：这里的input值得是表单元素

<input type="text" >

Answer 1

重写DOM原型方法你觉得呢？

var desc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')
Object.defineProperty(HTMLInputElement.prototype, 'value', {
    ...desc,
    set(v) {
        console.log('set',v);
        desc.set.call(this, v)
    }
})

Answer 2

HTMLInput 元素，是用 onchange 来监听变化的啊

inputEl.onchange = function() {
   console.log("changed to", this.value);
}

如果是代码赋值，需要手工触发 onchange 事件

inputEl.value = 10;   // 先赋值
const ev = document.createEvent("HTMLEvents");  
ev.initEvent("change", false, true);  
inputEl.dispatchEvent(ev); // 然后触发事件

---

下面的答案虽然不切题，还得留着吧

let input = { value: 0 };

input = new Proxy(input, {
    set(target, key, value, receiver) {
        const oldValue = target[key];
        Reflect.set(target, key, value, receiver);
        if (key.startsWith("on")) { return; }
        if (target.onChange) {
            target.onChange(oldValue, value);
        }
    }
})

input.onChange = function (oldValue, value) {
    console.log("value changed from", oldValue, "to", value);
}

input.value = 10;

// output:
// value changed from 0 to 10

---

如果 input 对象可以自己控制，还可以这样写

const input = {
    set value(v) {
        const oldValue = this._value;
        this._value = v;
        if (this.onChange) {
            this.onChange(oldValue, v);
        }
    },
    get value() {
        return this._value;
    }
};

input.value = 0;

input.onChange = function (old, value) {
    console.log(`from ${old} to ${value}, now it's ${this._value}`);
}

input.value = 10;