如何监听Input值的程序化修改？添加事件未触发求解决方案

方法1：通过重写属性setter监听修改 #

直接改写目标input的value属性setter，只要值被修改（不管是UI操作还是JS代码），都会触发监听逻辑，还能直接定位修改来源。

在浏览器控制台执行以下代码：

const input = document.getElementsByName('MyDatePicker')[0];
let currentValue = input.value;

Object.defineProperty(input, 'value', {
  get() {
    return currentValue;
  },
  set(newVal) {
    console.log('Value被修改：', currentValue, '→', newVal);
    console.trace(); // 打印完整调用栈，直接定位修改代码的位置
    currentValue = newVal;
    // 若需要触发原生事件，可手动派发
    input.dispatchEvent(new Event('input'));
    input.dispatchEvent(new Event('change'));
  },
  configurable: true
});

方法2：利用浏览器DevTools断点功能 #

1. 打开浏览器开发者工具（F12），切换到Elements面板
2. 找到目标input元素，右键点击 → Break on → Attribute modifications
3. 当JS代码修改input的value属性时，会自动触发断点，直接跳转到修改代码的位置

关于事件监听失效的原因 #

change事件仅在用户通过UI修改值并失去焦点时触发，input事件是用户通过UI输入时触发，但JS直接修改value属性不会自动触发这两个原生事件，必须手动调用dispatchEvent才会触发监听函数。

内容的提问来源于stack exchange，提问作者Eric