收聽HTML元素值的任何更改（由代碼引起）

Question

我可以使用「oninput」，「onchange」等一些事件來檢測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