JS修改input值无法触发onchange事件解决方法

As we all know，input框的change事件是基于失焦事件onblur的，所以如果js操作input的值是没有失焦这个概念的，自然也无法触发onchange事件。

解决方案：用js在操作元素中新建一个 _value 的属性，把原来 js 对 value 的操作改为对 _value 属性的操作，这样访问 _value 时，会自动调用 get 函数获取 value 的值，设置 _value 属性时，会自动调用 set 函数设置 value 属性的值，你可以将你的程序绑定在 get/set 函数中，这样就可以监听 js 修改 value 数据的变化；
如果直接设置 value 属性为 访问器属性，结果会造成，用户在页面修改了 value，不会调用 set 函数，所以新加了上面的中介 _value。

参考代码HTML

JS代码

window.onload = function() {

    let input = document.getElementById('demo');

    function oninputCallback() {
        console.log('oninput event ');
    }

    function onchangeCallback() {
        console.log('onchange event');
    }

    input.addEventListener('oninput', oninputCallback, false);
    input.addEventListener('onchange', onchangeCallback, false);

    Object.defineProperty(input, '_value', {
        configurable: true,
        set: function(value) {
            this.value = value;
            oninputCallback();
            onchangeCallback();
        },
        get: function() {
            return this.value;
        }
    });
};

执行效果：

参考地址：原问题方案链接