极客笔记如何在Firefox中拖动时触发input type=”range”的onchange事件
range输入框允许选择特定范围内的任何值。使用JavaScript，我们可以获取用户在range输入框中输入的值。
onchange 事件只有在用户释放鼠标按键时触发，所以在拖动滑块时不会更新值。在所有浏览器中都会遇到这个问题，比如Chrome、Safari，而不仅仅是Firefox。
用户可以参考以下示例，检查在拖动range输入框时是否更新了输入值。
示例1（拖动range输入框时输入值不会更新）
在下面的示例中，我们创建了一个range输入框。同时，我们在range输入框中添加了onchange事件。用户可以观察到只有在释放鼠标点击时才会更新值，而在拖动range输入框时不会。
<html>
<body>
<h2> Using the <i> onchange() event </i> to update the range values. </h2>
<input type = "range" min = "1" max = "10" step = "1" onchange = "changeValue(this.value)">
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
function changeValue(newVal) {
output.innerHTML = newVal;
}
</script>
</body>
</html>
上述代码在用户释放鼠标点击后更新输入值。仅在拖动后更新范围不是一个好主意。我们需要以这样的方式实现代码，即在拖动范围输入时也更新范围值。
我们可以使用 oninput 事件来在拖动范围输入时更新范围输入的值，而不是使用 onchange 事件。
使用oninput事件与input type=range
在用户拖动范围输入时，oninput事件会在用户改变范围输入值时触发，而且会在用户拖动范围输入时持续触发。
语法
用户可以按照下面的语法来使用oninput事件属性与input type=range。
<input type = "range" min = "0" max = "50" step = "5" oninput="changeValue(this.value)">
在上述的语法中，每当输入事件触发时，我们调用函数。
示例2
在下面的示例中，我们创建了一个范围输入框，允许用户选择0到50之间的任意值。此外，我们在范围输入框中添加了步长属性，允许用户只选择5的倍数。
我们还添加了oninput属性，每当用户拖动范围输入框时调用changeValue()函数。在输出中，用户可以看到在用户拖动范围输入框时，所选值下方会更新。
<html>
<body>
<h2> Using the <i> oninput() event </i> to update the range values. </h2>
<input type = "range" min = "0" max = "50" step = "5" oninput = "changeValue(this.value)">
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
function changeValue(newVal) {
output.innerHTML = "The selected input value in the range input is " + newVal;
}
</script>
</html>
示例3
在下面的示例中，我们通过其ID在JavaScript中访问了范围输入。此后，我们使用addEventListner()方法在范围输入上添加了input事件。在addEventListner方法中，我们获取了事件对象。同时，我们使用event.target.value访问了目标元素的值，并将新值更新到HTML文档中。
在输出中，用户可以观察到下面的代码在拖动范围输入时也会更新范围输入的值。
<html>
<body>
<h2> Using the <i> oninput() event </i> to update the range values. </h2>
<input type = "range" min = "0" max = "100" step = "10" id = "range_input">
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let input = document.getElementById('range_input');
input.addEventListener('input', (event) => {
// event.target returns the targetted element on which the input event is triggered.
// event.target.value returns the value of the targetted element
output.innerHTML = "The selected input value in the range input is " + event.target.value;
})
</script>
</body>
</html>
程序员们学会了在拖动范围输入时更新其值。如果在拖动范围输入时不更新其值，用户无法估计他们选择了哪个值以及离目标值有多远。因此，在使用输入事件拖动范围输入时更新值是必要的。