如何跨浏览器可靠地跟踪单选按钮组的变化？

单选按钮组中更改事件的跨浏览器解决方案

在多个输入共享相同名称的单选按钮组中，onChange 事件跟踪更改可能不可靠。这是因为取消选择单选按钮时 onChange 不会触发。

解决方法：事件委托和状态管理

一种解决方法是使用事件委托和状态管理跟踪之前选中的单选按钮。通过向包含单选按钮的表单添加单个事件侦听器，我们可以捕获所有更改事件并相应地更新我们的状态：

<code class="javascript">var rad = document.myForm.myRadios;
var prev = null;

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}</code>

此脚本为每个单选按钮分配一个更改事件侦听器。发生更改时，它会在更新“prev”变量以引用当前选中的单选按钮之前记录先前选中的单选按钮的值（如果有）。

替代方法

• 可以使用事件冒泡代替直接事件委托。在此方法中，事件侦听器被添加到表单元素，并且当单击单选按钮时事件将冒泡到表单。但是，这种方法可能会对性能产生影响。
• 点击事件可以用作 onChange 的后备。虽然无论单选按钮是否选中都会触发单击事件，但它们缺少单选按钮组状态的上下文。

以上是如何跨浏览器可靠地跟踪单选按钮组的变化？的详细内容。更多信息请关注PHP中文网其他相关文章！