如何用addEventListener捕获下拉框修改输入框值后的所有变化？

架构老林

2026-8-12

监听输入框所有值变化的正确方法

你遇到的问题是因为input事件只在用户手动操作（比如打字、点击数字输入框的上下箭头）时触发，用JS代码直接修改输入框value的时候不会触发这个事件。下面给两种可行的解决办法：

方案1：用MutationObserver监听属性变化

这种方法能捕获所有对输入框value属性的修改，不管是用户操作还是代码修改都能监听到：

const aE = document.querySelector('input[type="number"]');

// 创建观察者实例
const valueObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 只处理value属性的变化
    if (mutation.attributeName === 'value') {
      console.log(aE.value);
      // 这里写你要执行的逻辑
    }
  });
});

// 开始监听输入框的value属性变化
valueObserver.observe(aE, {
  attributes: true,
  attributeFilter: ['value']
});

方案2：手动触发input事件

如果下拉框的逻辑是你自己写的，那可以在修改输入框值之后，手动触发input事件，这样原来的监听器就能接收到：

const selectBox = document.querySelector('select');
const aE = document.querySelector('input[type="number"]');

// 监听下拉框选择事件
selectBox.addEventListener('change', () => {
  aE.value = selectBox.value;
  // 手动触发input事件
  aE.dispatchEvent(new Event('input'));
});

// 原来的input监听器不用改
aE.addEventListener("input", (e) => {
  console.log(aE.value);
});