Comment puis-je transmettre des arguments aux écouteurs d'événements JavaScript ?

Passer des arguments aux fonctions d'écoute EventListener

Dans les scénarios où vous devez transmettre des arguments aux fonctions d'écoute dans les appels addEventListener, la valeur de l'argument peut ne pas être accessible dans l’auditeur. En effet, la fonction est traitée comme une nouvelle variable dans la portée de l'auditeur.

Solution : utiliser l'attribut cible

Pour résoudre ce problème, envisagez d'utiliser l'attribut cible de l'objet événement dans la fonction d'écoute. En définissant une propriété personnalisée sur la cible de l'événement, vous pouvez accéder à l'argument souhaité dans l'écouteur.

Exemple :

Considérez un bouton HTML et un écouteur d'événement JavaScript :

<button>

const myButton = document.getElementById('myButton');

// Set a custom property on the button target
myButton.myParam = 'This is my parameter';

// Add an event listener to the button
myButton.addEventListener('click', (event) => {
  // Retrieve the custom property from the event target
  const myParameter = event.currentTarget.myParam;

  // Do something with the parameter
  alert(`My parameter: ${myParameter}`);
});

Dans cet exemple, lorsque le bouton est cliqué, la valeur de la propriété myParam est récupérée de la cible de l'événement et affiché dans une alerte. Cette approche vous permet de transmettre efficacement des arguments aux fonctions d'écoute et d'y accéder dans le cadre de l'écouteur.

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!