Comment puis-je transmettre des arguments aux fonctions d'écoute d'événements en JavaScript ?

Écouteurs d'événements : transmission d'arguments aux fonctions d'écoute

Lors de l'attachement d'écouteurs d'événements à l'aide de la méthode addEventListener, il peut y avoir des situations où vous devez transmettre arguments à la fonction d'écoute. Un de ces scénarios consiste à récupérer la valeur d'une variable définie en dehors de la portée de l'auditeur.

Scénario et problème

Considérez le code suivant :

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

Ici, someVar est une variable définie en dehors de la fonction d'écoute, et nous visons à transmettre sa valeur en argument à some_function lorsque le L'événement "clic" se produit. Cependant, dans la fonction d'écoute, someVar est traité comme une nouvelle variable, ce qui entraîne un problème où sa valeur prévue n'est pas accessible.

Solution proposée : utilisation des propriétés de la cible d'événement

Au lieu de passer des arguments explicitement, pensez à accéder aux propriétés de la cible de l'événement pour récupérer les informations nécessaires. Dans l'exemple ci-dessus, vous pouvez attacher une propriété personnalisée myParam à someObj, comme indiqué ci-dessous :

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';

function myFunc(evt)
{
  window.alert(evt.currentTarget.myParam);
}

Maintenant, dans la fonction d'écoute myFunc, vous pouvez accéder à la valeur du paramètre en faisant référence à evt.currentTarget.myParam. Cette méthode élimine le besoin de transmettre explicitement des arguments et garantit que la valeur correcte est obtenue.

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!