看了网上的资料也比较杂，自己也做一个整理共享一下解决方案

1.原生js的改变之后手动添加监听

1

2

3

var ttt = document.getElementById("ttt");

var eee = document.getElementById("eee");

eee.οnchange=function (){

ttt.value=eee.value;

ttt.addEventListener("input",changeValue(),false);

}

function changeValue(){

alert(ttt.value);

}

需要注意的是，ttt添加的监听的方法名一定要加()，就是在eee的change事件触发的是否给ttt赋值，并且手动触发ttt的change事件

2.添加自定义属性触发事件

1

2

3

var ttt = document.getElementById("ttt");

var eee = document.getElementById("eee");

eee.οnchange=function (){

ttt._value=eee.value;

}

Object.defineProperty(ttt,"_value",{

configurable:true,

set:function(value){

this.value = value;

changeValue();

},

get:function(){

return this.value;

}

});

function changeValue(){

alert(ttt.value);

}

这种方式不需要添加监听，是通过添加自定义属性并且在自定义属性的set方法里触发input的值改变事件

3.jquery的手动触发input改变事件

1

2

3

$("#two").on("change",function(){

~!($("#one").val())>-2 ? alert($("#one").val()) : ($("#one").on("change",function(){

alert($(this).val());

}));

});

$("#three").on("change",function(){

$("#two").val($(this).val());

$("#two").change();

});

var index = 0;

setInterval(function(){

index ++;

$("#five").val(index);

if (index == 10) {

$("#one").val($("#three").val());

$("#one").change();

}

},1000);

这种方式是在值改变的时候手动触发change事件，这里的代码是select框的值改变了，并且当#one这个input框有值了才触发，就是满足两个事件才执行

4.最终解决办法(推荐一篇文章)

Object.defineProperty(document.getElementById("id"),"value",{

set:(v)=>{

document.getElementById("id").setAttribute("value",v);

/**

*触发chang事件的代码

*/

});

原来的那几种方法，局限性太多，通过重写原形属性的setter方法，实现动态change事件的触发，目前为止，我觉得最好的解决办法。

5.超级最终解决办法

我还是太年轻了，第四种方法有一个很大的弊端，就是手动更改input框数据的时候是不会触发setter方法的，只有js调用了赋值操作才会进，所以，又有了下一个方法

(function($) {

const o = $.fn.val;

$.fn.val = function() {

const r = o.apply(this, arguments);

if (this.is("#id") && arguments.length > 0) {

this.trigger("change");

}

return r;

}

})(jQuery);

这个方法，依赖于jQuery，并且js中动态赋值都只能用val，这个方法才生效。

主要的逻辑就是重写jquery的val方法，在方法体中触发input的change事件。

把这个方法拷贝到你的js的文件顶端就可以生效了