Comment suivre de manière fiable les modifications apportées aux groupes de boutons radio dans les navigateurs ?

Solution multi-navigateurs pour les événements de changement dans les groupes de boutons radio

Dans les groupes de boutons radio où plusieurs entrées partagent le même nom, l'événement onChange peut être peu fiable pour suivre les modifications. En effet, onChange ne se déclenche pas lorsqu'un bouton radio est désélectionné.

Solution de contournement : délégation d'événements et gestion de l'état

Une solution de contournement consiste à utiliser la délégation d'événements et la gestion de l'état. pour suivre le bouton radio précédemment coché. En ajoutant un seul écouteur d'événement au formulaire contenant les boutons radio, nous pouvons capturer tous les événements de changement et mettre à jour notre état en conséquence :

<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>

Ce script attribue à chaque bouton radio un écouteur d'événement de changement. Lorsqu'un changement se produit, il enregistre la valeur du bouton radio précédemment coché (le cas échéant) avant de mettre à jour la variable « prev » pour faire référence au bouton radio actuellement coché.

Approches alternatives

• Le bouillonnement d'événements peut être utilisé à la place de la délégation directe d'événements. Dans cette approche, l'écouteur d'événement est ajouté à l'élément de formulaire et l'événement apparaît dans le formulaire lorsqu'un bouton radio est cliqué. Cependant, cette approche peut avoir des implications en termes de performances.
• Les événements de clic peuvent être utilisés comme solution de secours pour onChange. Bien que les événements de clic soient déclenchés indépendamment du fait qu'un bouton radio soit coché ou décoché, ils ne disposent pas du contexte de l'état du groupe de boutons radio.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!