javascript - 是否可以为HTML5输入滑块触发oninput事件？

我有一个HTML5输入滑块，可以通过JavaScript进行更改(在我的示例中，我是使用jquery UI滑块对其进行更改的，但是由于其他用户的输入，它也可能会更改，例如单击此按钮1倍) ，2倍变焦等)

滑块具有附加的oninput事件，因此，当用户更改滑块值时，它将随后更新用户界面。

问题是，通过JavaScript更改值不会触发oninput事件，我尝试过执行显然适用于rangeInputRaw.oninput()的textarea，但它只会在范围输入上引发错误。

这是我正在谈论的示例:

http://jsfiddle.net/qc03cumt/1/

(如果滑动jQuery UI滑动器，则会看到顶部的HTML滑动器发生变化，但是其值不会更新；如果滑动HTML滑动器，则该值会更新)

供将来引用，HTML如下所示:

<h1>Range Slider</h1>

<form action="">
    <p>Range current value <span id="range-current-value">N/A</span></p>
    <input type="range" min="0" max="100" class="range-input" id="range-input" />

    <p>Current value: <span id="currrent-value">N/A</span></p>
    <div class="slider" id="slider"></div>
</form>

JavaScript如下所示:

var currentValue = $("#currrent-value");
var htmlRange = $("#range-input");
var htmlRangeRaw = document.getElementById("range-input");

$("#slider").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        currentValue.html(ui.value);
        htmlRange.val(ui.value);
    }
});

var rangeInputRaw = document.getElementById("range-input");
var rangeInputOutput = document.getElementById("range-current-value");
rangeInputRaw.addEventListener("input", function(event) {
    console.log("change");
    rangeInputOutput.innerHTML = this.value;
})

如前所述，该示例使用jQuery UI，但您也想在其他用户交互上更改范围输入值也是可行的，例如更改另一个表单值或单击一个按钮。

我无法将事件侦听器从oninput更改为onchange，因为它需要增量更新，而不是在用户完成交互后才更新。

最佳答案

如果您不介意将“addEventListener”更改为“onInput = function”，请检查this link

$("#slider").slider({
    min: 0,
    max: 100,
    slide: function(event, ui) {
        currentValue.html(ui.value);
        htmlRange.val(ui.value);
        htmlRange[0].onInput();
    }
});
....
rangeInputRaw.onInput = function(event) {
    console.log("change");
    rangeInputOutput.innerHTML = this.value;
};