每次更改时获取滑块值的最佳方法是什么？

Question

这个问题可能暗示我需要 onchange，但事实并非如此。比较这两个片段：

var slider = document.getElementById("slider")
slider.onchange = function() {
  var currentVal = slider.value
  document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}

<input type="range" id="slider" min="1" max="10" step="1" , value="4">
<br>
<b>The current value is 4</b>

var slider = document.getElementById("slider")
slider.onmousemove = function() {
  var currentVal = slider.value
  document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}

<input type="range" id="slider" min="1" max="10" step="1" , value="4">
<br>
<b>The current value is 4</b>

上一个使用onchange，只有在松开鼠标后才更新。

下面的那个使用 onmousemove 并在每次鼠标移到滑块上时更新。但是，我认为这不是最节省内存的方法。使用箭头键时它也不会改变，除非鼠标移到滑块上。

是否有经过认证或至少更好的方法来实现较低的目标？

Answer 1

只需使用 oninput 事件，当用户在现代浏览器上滑动时会调用它。

var slider = document.getElementById("slider")
slider. oninput = function() {
  var currentVal = slider.value
  document.querySelector("b").innerText = "The current value is " + currentVal.toString()
}

<input type="range" id="slider" min="1" max="10" step="1" , value="4">
<br>
<b>The current value is 4</b>

每次更改时获取滑块值的最佳方法是什么？

What is the best way to get a slider value every time it changes?

html

javascript

slider