javascript - 是否可以触发 HTML5 输入 slider 的 oninput 事件？

Question

我有一个 HTML5 输入 slider ，我正在通过 JavaScript 更改它(在我的示例中，我正在使用 jquery UI slider 更改它，但它也可能由于其他用户输入而更改，例如单击此用于 1 倍、2 倍缩放等的按钮)

slider 有 oninput 事件附加到它，因此当用户更改 slider 值时，它会更新用户界面。

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

这是我正在谈论的例子:

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

(如果您滑动 jQuery UI slider ，您会看到顶部的 HTML slider 发生变化，但它的值不会更新，但是如果您滑动 HTML slider ，该值会更新)

为了将来引用，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，因为它需要增量更新，而不是在用户完成交互时更新。

Answer 1

如果您不介意将“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;
};