input range滑块oninput/onchange事件监听不生效问题

云原生阿岚

2026-8-29

range类型滑块绑定事件不触发修复方案

问题根源

事件监听器绑定的事件名写法错误：addEventListener 方法接收的原生事件名不需要带on前缀，错误写法里的oninput不是浏览器原生触发的事件，相当于给一个不存在的自定义事件绑了回调，自然不会执行，也不会抛出控制台报错。
带on前缀的是DOM元素的事件属性写法，和addEventListener的事件名规则不能混用。

正确写法

方式1：addEventListener 绑定（推荐，支持同一事件绑定多个回调）

直接使用不带on的原生事件名即可：

var slider = document.querySelector('.weather-slider')

// 拖动滑块过程中值变化时实时触发
slider.addEventListener('input', (e) => {
  console.log('滑块当前值：', slider.value)
})

// 滑块值修改完成、拖动结束后触发
slider.addEventListener('change', (e) => {
  console.log('滑块最终值：', slider.value)
})

方式2：DOM事件属性赋值

如果要用带on的写法，直接给元素的对应事件属性赋值回调即可，注意这种写法同一事件只能绑定一个回调，后赋值的会覆盖之前的回调：

var slider = document.querySelector('.weather-slider')

slider.oninput = function() {
  console.log('滑块当前值：', this.value)
}

slider.onchange = function() {
  console.log('滑块最终值：', this.value)
}