JavaScript 中實現數據變化即時監聽的替代方案

問題

onchange 事件僅在值發生變化並失去焦點時觸發。有沒有辦法在值「不變化」或「實時」觸發檢測？

解決方案

使用 定時器輪詢 或 MutationObserver 監聽 DOM 屬性變化：

// 方案一：定時器輪詢（簡單兼容）
let lastVal = input.value;
setInterval(() => {
  if (input.value !== lastVal) {
    lastVal = input.value;
    handleChange(lastVal);
  }
}, 300);

// 方案二：input 事件（實時輸入監聽，現代瀏覽器推薦）
input.addEventListener('input', e => handleChange(e.target.value));

// 方案三：Object.defineProperty 代理數據模型（MVVM 思想）
const data = {};
Object.defineProperty(data, 'val', {
  set(v) { console.log('值變更:', v); },
  get() { return this._val; }
});

推薦使用原生 input 事件，它在用戶輸入、粘贴、拖拽等導致值改變時即時觸發，無需輪詢。