不修改现有代码如何监听JS修改值触发的change事件

jQuery 原生val()方法直接赋值时不会自动触发change、input这类用户交互相关事件，你可以通过以下两种无侵入方案实现拦截，全程无需修改原有赋值代码：

方案1：劫持jQuery全局val方法（适合需要监听所有jQuery赋值操作的场景） #

// 缓存原生jQuery val方法，保证原有逻辑兼容
const originalVal = $.fn.val;
$.fn.val = function (value) {
  const result = originalVal.apply(this, arguments);
  // 仅匹配赋值操作+目标元素
  if (arguments.length > 0 && this.is("#code")) {
    // 此处编写你的拦截逻辑，例如新值校验、事件触发、行为阻断
    const newValue = arguments[0];
    console.log("捕获到jQuery赋值，新值为：", newValue);
    // 如需触发change事件给原有监听逻辑使用，可主动调用
    // this.trigger("change");
  }
  return result;
};

方案2：劫持目标input的value属性（更轻量，无全局污染） #

const targetInput = document.querySelector("#code");
// 缓存原生input value属性描述符
const originalValueDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");

Object.defineProperty(targetInput, "value", {
  get() {
    return originalValueDesc.get.call(this);
  },
  set(newVal) {
    // 此处编写你的拦截逻辑
    console.log("捕获到value赋值，新值为：", newVal);
    // 如需主动触发change事件可新增如下代码
    // this.dispatchEvent(new Event("change"));
    // 执行原生赋值逻辑，不影响原有业务
    originalValueDesc.set.call(this, newVal);
  }
});

补充说明 #

• 若需要拦截已经被主动触发的change事件，直接给目标元素绑定change监听，在回调中调用e.stopPropagation()即可阻断事件传播
• 若需要拦截非法赋值，只需在拦截逻辑中增加校验规则，不符合条件时不执行原生赋值逻辑即可

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