Question

我可以使用一些事件，例如＆＃34; oninput＆＃34;，＆＃34; onchange＆＃34; ...检测HTML元素是否更改其值。但是这些事件仅在用户手动更改值时发生（按键盘，鼠标...）

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

那么如何检测元素值何时发生变化？（在所有情况下）

Answer 1

您可以尝试DOMSubtreeModified事件

$('element').on("DOMSubtreeModified",function(){
  alert('changed');
});

*根据jquery的版本而不是.on可以是.bind

或者您可以使用MutationObserver来检测DOM中的更改并且是最推荐的。

Answer 2

您可以尝试这样的事情：

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

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

2 个答案: