Maison > interface Web > js tutoriel > Comment puis-je transmettre des arguments aux fonctions d'écoute d'événements en JavaScript ?

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

Linda Hamilton
Libérer: 2024-12-19 00:23:10
original
607 Les gens l'ont consulté

How Can I Pass Arguments to Event Listener Functions in 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);
Copier après la connexion

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);
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal