如何跨瀏覽器可靠地追蹤單選按鈕組的變化？

單選按鈕群組中變更事件的跨瀏覽器解決方案

在多個輸入共用相同名稱的單選按鈕群組中，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中文網其他相關文章！