什么 DOM 事件允许在我拖动范围滑块时持续触发？

Question

我目前有一个滑块和它旁边的一个框，我想在其中显示滑块的当前值。当我将滑块从 0 拖动到 100 时，我希望框中的值不断变化。哪个 DOM 事件最能描述此类事件？目前我将其关闭，以便在我完成移动滑块后更新框中的值。

let text1 = document.getElementById("sliderText1");
let slider1 = document.getElementById("slider1");
text1.textContent = slider1.value + "%";
slider1.addEventListener("mouseup",function(){
  text1.textContent = slider1.value + "%"
});

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
  <div style="float:left";>
    <input type="range" id="slider1" min="0"        max="100" value="50"> 
  </div>
  <div style = "float:left;">
    <p id = "sliderText1" style = "margin-top:      2px; margin-left: 2px; border-style:          solid"></p>
  </div> 
<script src="script.js"></script>
</body>
</html>

Answer 1

您可以使用 mousemove 事件，应该可以。

这是关于该事件的 MDN 文档 https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

let text1 = document.getElementById("sliderText1");
let slider1 = document.getElementById("slider1");
text1.textContent = slider1.value + "%";
slider1.addEventListener("mousemove",function(e){
  text1.textContent = slider1.value + "%"
});

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
</head>
<body>
  <div style="float:left";>
    <input type="range" id="slider1" min="0"        max="100" value="50"> 
  </div>
  <div style = "float:left;">
    <p id = "sliderText1" style = "margin-top:      2px; margin-left: 2px; border-style:          solid"></p>
  </div> 
<script src="script.js"></script>
</body>
</html>

Answer 2

您可以结合使用 mouseup 和 mousedown 以及 setInterval 全局函数。

mousedown 事件仅在单击鼠标后执行一次，因此采用 setInterval 的方法。

运行 mousedown 的 setInterval 和 mouseup 的取消。

let text1 = document.getElementById("sliderText1");
let slider1 = document.getElementById("slider1");
text1.textContent = slider1.value + "%";
let intervalId;
slider1.addEventListener("mouseup", function() {
  clearInterval(intervalId);
  text1.textContent = slider1.value + "%"

});

slider1.addEventListener("mousedown", function() {
  intervalId = setInterval(() => {
    console.log('mousedown')
  }, 100)
});

<!DOCTYPE HTML>
<html>

<head>
  <title></title>
</head>

<body>
  <div style="float:left" ;>
    <input type="range" id="slider1" min="0" max="100" value="50">
  </div>
  <div style="float:left;">
    <p id="sliderText1" style="margin-top:      2px; margin-left: 2px; border-style:          solid"></p>
  </div>
  <script src="script.js"></script>
</body>

</html>

什么 DOM 事件允许在我拖动范围滑块时持续触发？

What DOM event allows for a constant triggering as I drag a range slider?

javascript

dom

mouseevent