为何number类型input的鼠标滚轮操作不触发onchange事件？

给你几个实用的简便方案，不用额外通过JS互操作去取值：

• 手动触发change事件
  在你的滚轮事件处理逻辑里，修改完输入框值之后，直接手动触发change事件，这样就能复用你原本写好的onchange处理逻辑，不用单独做值的获取。
  代码示例：

  function handleMouseWheel(e) {
    e.preventDefault();
    const input = e.target;
    // 这里是你原本的数值增减逻辑
    input.value = parseInt(input.value) + (e.deltaY > 0 ? -1 : 1);
    // 手动触发change事件
    input.dispatchEvent(new Event('change'));
  }
  

• 改用input事件监听
  onchange事件只有在输入框失去焦点时才会触发，而input事件会在输入框值发生任何变化时立即触发——包括滚轮修改、键盘输入、粘贴等场景。把原本的onchange换成oninput，或者同时监听input事件，就能自动捕获滚轮修改后的新值。
  代码示例：

  input.addEventListener('input', function(e) {
    // 直接在这里处理值变化后的逻辑
    console.log('当前值：', e.target.value);
  });
  

• 用原生stepUp/stepDown方法
  number类型的input本身自带stepUp()和stepDown()方法，调用这些方法可以直接增减数值，而且调用后会自动触发input事件（部分浏览器也会触发change），不用自己写数值加减的逻辑，更贴合原生行为。
  代码示例：

  function handleMouseWheel(e) {
    e.preventDefault();
    const input = e.target;
    // 根据滚轮方向调用对应方法
    e.deltaY > 0 ? input.stepDown() : input.stepUp();
  }
  

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