Javascript 侦听HTML元素值中的任何更改（由代码引起）

我可以使用一些事件，如“oninput”、“onchange”。。。检测HTML元素是否更改其值。但这些事件仅在用户手动更改值（通过键盘、鼠标…）时发生

但有时HTML元素的值会被我的代码（而不是用户）或表单的reset（）方法更改，我也想听听这些更改事件

那么，如何检测元素的值何时更改？（在所有情况下）

您可以尝试此事件

*根据jquery的版本而不是

。on

可以是

。bind

---

或者，您也可以使用检测DOM中的更改并且是最推荐的方法。

您可以尝试以下方法：

document.ewatch=[];
watchEle=(id,callback)=>{
    var ii=document.ewatch.length;
    document.ewatch[ii]={};
    var we={
        watch_id:ii,
        ele:document.getElementById(id)
    };
    we.fun=callback;
    we.old=we.ele.innerHTML;
    we.watch_code=function(){
        var id=ii;
        var ee=document.ewatch[id];
        var new1=ee.ele.innerHTML;
        if(new1!=ee.old){
            we.fun(ee.old,new1);
            ee.old=new1;
            document.ewatch[id]=ee;
        }
    };
    document.ewatch[ii]=we;
    return {
        start:()=>{
            we.interval=setInterval(we.watch_code,100);
        },
        stop:()=>{
            try{
                clearInterval(we.interval);
            }catch(e){}
        }
    };
};
var e1=watchEle("ele_id",(oldc,newc)=>{
    alert("content change");
});
e1.start();

将观察程序附加到元素，观察

innerHTML

内容，并在其更改的事件上执行回调

---

对于您的问题，您可以将

.innerHTML

更改为

.value

在Chrome和Safari中，“DOMSubtreeModified”事件不起作用：（我认为突变观察者的方法可以解决问题，但有点复杂：）@DucHoang确切地说，我甚至在回答中强调了这将是最好的选择，祝您好运。

document.ewatch=[];
watchEle=(id,callback)=>{
    var ii=document.ewatch.length;
    document.ewatch[ii]={};
    var we={
        watch_id:ii,
        ele:document.getElementById(id)
    };
    we.fun=callback;
    we.old=we.ele.innerHTML;
    we.watch_code=function(){
        var id=ii;
        var ee=document.ewatch[id];
        var new1=ee.ele.innerHTML;
        if(new1!=ee.old){
            we.fun(ee.old,new1);
            ee.old=new1;
            document.ewatch[id]=ee;
        }
    };
    document.ewatch[ii]=we;
    return {
        start:()=>{
            we.interval=setInterval(we.watch_code,100);
        },
        stop:()=>{
            try{
                clearInterval(we.interval);
            }catch(e){}
        }
    };
};
var e1=watchEle("ele_id",(oldc,newc)=>{
    alert("content change");
});
e1.start();