更改元素的属性 - 为什么 onchange 事件没有触发？答案

【问题标题】：changing attribute of element - why is onchange event not fireing?更改元素的属性 - 为什么 onchange 事件没有触发？
【发布时间】：2014-03-07 17:18:21
【问题描述】：

有关下述问题的演示，请参阅JSFiddle

HTML：

<input type="range" id="slider_length" min="10" max="200" value="0" step="10" onchange="changeValue1();" />
<span id="slider_length_span">10 mm</span>
</br>
<input type="range" id="slider_length2" min="5" max="15" value="0" step="10" onchange="changeValue2();" />
<span id="slider_length2_span">5 mm</span>

JS：

window.changeValue1 = function()
{
    var slider = document.getElementById("slider_length");
    var span = document.getElementById("slider_length_span");
    span.innerHTML = slider.value + " mm";

    var slider2 = document.getElementById("slider_length2");
    slider2.setAttribute("max", slider.value - 5);
}

window.changeValue2 = function()
{
    var slider = document.getElementById("slider_length2");
    var span = document.getElementById("slider_length2_span");
    span.innerHTML = slider.value + " mm";
}

我有一个范围元素，用户可以在其中选择 10 到 200 之间的值，步长为 10。
第二个范围元素的值在 5 到 15 之间，步长为 10。

如果用户更改了第一个范围元素，onchange 事件将被触发（成功），其中第二个范围元素的“max”属性被更改（通过第一个元素的值 -5）。到目前为止，这工作正常。

重现问题的步骤：

在第一个范围元素上选择任意数字（例如 150）
在第二个范围元素上选择可能的最大数字（例如 145）
减少第一个范围元素上的选定数字（例如 150 -> 110）

预期行为：
当第一个范围元素的 onchange 事件被触发时，第二个范围元素的“max”属性变为 105。第二个范围元素的值仍然是 145，应该达到 105（可能的最高值）。因为第二个范围元素发生了变化，所以触发了 onchange 事件，更新了一个显示其值的 span 元素。

实际行为：
当第二个范围元素的“max”属性发生变化时，onchange 事件似乎不会触发。

问题：为什么 onchange 事件没有触发？如果 onchange 事件不是在这种情况下使用的正确事件，我应该使用哪个事件？

【问题讨论】：

当通过脚本更改值时，更改事件根本不会触发。一种解决方案是也从脚本中触发事件（但使用更复杂的事件处理方法可以更轻松地完成）。

标签： javascript html events

【解决方案1】：

Onchange 仅检查输入的值是否更改，而不检查其任何其他属性是否更改。此外，只有在文本字段失去焦点等特定用户操作之后，浏览器才会开始检查是否发生了更改。

为什么还要使用第二个事件？看起来你应该能够在第一个事件中做你想做的所有事情。

【讨论】：

【解决方案2】：

我对你的函数做了一个技巧，比如；

window.changeValue1 = function()
{
    var slider = document.getElementById("slider_length");
    var span = document.getElementById("slider_length_span");
    span.innerHTML = slider.value + " mm";

    var slider2 = document.getElementById("slider_length2");
    if ((slider.value - 5) < slider2.value) {
        slider2.value = 0;
        slider2.setAttribute("max", slider.value - 5);
        slider2.value = slider.value - 5;
        var span = document.getElementById("slider_length2_span");
        span.innerHTML = slider2.value + " mm";
    } else {
        slider2.setAttribute("max", slider.value - 5);
    }



}

为了在您的情况下设置第二个范围的最大值，我已将第二个范围设置为零，设置 slide2 的最大范围并将 slide2 值设置为可能的最大值。您可以在此处查看工作示例：http://jsfiddle.net/wtq6H/7/

【讨论】：