So erfassen Sie Ereignisse zur Deaktivierung von Optionsfeldern: Jenseits der onChange-Einschränkungen

Verwirrung durch Optionsfelder: OnChange-Einschränkungen beheben

Optionsfelder bieten eine bequeme Möglichkeit, einzelne Auswahlen zu verwalten, die Erfassung ihrer vollständigen Zustandsänderungen kann jedoch hilfreich sein herausfordernd. Stellen Sie sich ein Szenario vor, in dem wir mehrere Optionsfelder mit demselben Namen haben und sowohl die Auswahl als auch die Abwahl verfolgen müssen.

Das onChange-Ereignis scheint eine offensichtliche Wahl zu sein, wird jedoch nicht ausgelöst, wenn die Auswahl eines Optionsfelds aufgehoben wird. Dies führt zu einem Problem in Szenarien, in denen wir sowohl aktivierte als auch nicht aktivierte Ereignisse erfassen müssen.

Problemumgehung

Eine Problemumgehung besteht darin, die Methode addEventListener zu verwenden und einen Änderungsereignishandler anzuhängen zu jedem Optionsfeld. Innerhalb des Event-Handlers können wir mithilfe einer Variablen einen Verweis auf das zuvor aktivierte Optionsfeld (prev) verwalten.

Wenn ein Optionsfeld aktiviert ist, protokollieren wir sowohl den vorherigen Wert (prev.value) als auch den aktuellen Wert (this.value). Dadurch können wir sowohl aktivierte als auch nicht aktivierte Ereignisse erfassen.

<code class="js">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)
    });
}

Der zugehörige HTML-Code:

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>

Mit dieser Problemumgehung verfügen wir über eine allgemeine Lösung, die onChange-Ereignisse für alle Radios erfasst Schaltflächen, einschließlich Abwahlereignisse.

Das obige ist der detaillierte Inhalt vonSo erfassen Sie Ereignisse zur Deaktivierung von Optionsfeldern: Jenseits der onChange-Einschränkungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!