Question

我们假设您有一张幻灯片

<input id='bar' type='range' value='50'>

是否有可以使用的事件监听器将由值更改触发？如果没有，我可以使用JavaScript来制作自定义事件监听器吗？

document.getElementById('bar').onAttributeChange('value',function(){
    // some code.
});

Answer 1

您可以收听onchange事件（完成清理后会触发），例如不是在你拖动的时候，而是在你完成的时候。

e.g。

<input id="bar" type="range" value="50" onchange="...">

或使用eventListener：

document.getElementById('bar').addEventListener("change", doSomething, false);

Answer 2

您可以使用oninput()和onchange()事件的组合，如下面的代码。

<input id='bar' type='range' value='50' oninput="showVal(this.value)" onchange="showVal(this.value)" >

<script>
function showVal(newVal){
   console.log(newVal);
}
</script>

滑动滑块时会触发

oninput，并在释放鼠标时触发onchange。

DEMO

触发HTML元素属性的事件发生更改。（js）

2 个答案: