为了获得良好的跨浏览器行为和可理解的代码，最好是将onchange属性与表单结合使用:

函数showVal () { valBox。innerHTML = invalid .value; ｝ <形式onchange = " showVal ()" > <input type="range" min="5" max="10" step="1" id="inVal"> > < /形式 < span id = " valBox " > < / span >

使用oninput也是一样，值是直接改变的。 函数showVal () { valBox。innerHTML = invalid .value; ｝ <形式oninput = " showVal ()" > <input type="range" min="5" max="10" step="1" id="inVal"> > < /形式 < span id = " valBox " > < / span >

我把这个作为一个答案，因为它应该是它自己的答案，而不是一个不那么有用的答案下的评论。我发现这种方法比公认的答案要好得多，因为它可以将所有的js与HTML保存在一个单独的文件中。

由Jamrelian在他的评论中提供的答案。

$("#myelement").on("input change", function() {
    //do something
});

不过要注意Jaime的这句话

只是注意，有了这个解决方案，在chrome你会得到两个调用的处理程序(一个每个事件)，所以如果你关心，那么你需要防范它。

它会在你停止移动鼠标时触发事件，然后在你释放鼠标按钮时再次触发事件。

更新

对于导致功能两次触发的更改事件和输入事件，这几乎不是问题。

如果函数在输入时触发，则在触发change事件时不太可能出现问题。

当你拖动范围输入滑块时，输入会迅速触发。担心最后再触发一个函数调用，就像担心输入事件中的一滴水。

甚至包括更改事件的原因是为了浏览器兼容性(主要是IE)。

你可以使用JavaScript的"ondrag"事件来连续触发。它优于“输入”，原因如下:

浏览器的支持。 可以区分“ondrag”和“change”事件。“输入”触发拖拽和更改。

jQuery:

$('#sample').on('drag',function(e){

});

参考: http://www.w3schools.com/TAgs/ev_ondrag.asp

显然Chrome和Safari是错误的:onchange应该只在用户释放鼠标时被触发。要获得持续更新，您应该使用oninput事件，它将从Firefox、Safari和Chrome中从鼠标和键盘捕获实时更新。

然而，在IE10中不支持oninput，所以你最好的办法是将两个事件处理程序结合起来，像这样:

<span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/>

查看Bugzilla线程以获得更多信息。

还有另一种方法——在元素上设置一个标志，表明应该处理哪种类型的事件:

function setRangeValueChangeHandler(rangeElement, handler) {
    rangeElement.oninput = (event) => {
        handler(event);
        // Save flag that we are using onInput in current browser
        event.target.onInputHasBeenCalled = true;
    };

    rangeElement.onchange = (event) => {
        // Call only if we are not using onInput in current browser
        if (!event.target.onInputHasBeenCalled) {
            handler(event);
        }
    };
}

这个工作为我在反应引导

           <Form.Control
              type="range"
              className="slider"
              min="0.1"
              max="10"
              step={0.1}
              value={intensity}
              onChange={(e: any) => {
                if (!e.target.onInputHasBeenCalled) {
                  setIntensity(parseFloat(e.target.value.toString()));
                  e.target.onInputHasBeenCalled = true;
                } else {
                  e.target.onInputHasBeenCalled = false;
                }
              }}
            />