Comment puis-je contrôler la valeur de « ceci » dans un gestionnaire d'événements à l'aide de « addEventListener » ?

La valeur de "this" dans le gestionnaire utilisant addEventListener

Lors de l'utilisation de la méthode addEventListener pour gérer des événements, la valeur de "this" dans la fonction de gestionnaire peut être une source de confusion. Par défaut, « this » fait référence à l'élément qui a déclenché l'événement. Cependant, il existe des techniques pour modifier ce comportement et garantir que "this" fait référence à l'objet souhaité.

Dans votre exemple spécifique avec l'objet ticketTable, le problème se pose au sein de la fonction handleCellClick. Lorsqu'il est appelé en tant que gestionnaire d'événements, "this" pointe vers l'élément qui a reçu l'événement click, et non vers l'objet ticketTable.

Pour résoudre ce problème, vous pouvez utiliser la méthode bind, qui vous permet de spécifier la valeur de "ceci" pour une fonction spécifique. En liant « this » à l’objet ticketTable, vous pouvez vous assurer que « this » fait référence au bon objet dans la fonction handleCellClick. Voici une version mise à jour de votre code qui démontre ceci :

<code class="js">ticketTable.prototype.render = function(element) {
  // ...

  // Bind "this" to ticketTable object for handleCellClick function
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);

  // ...
}

ticketTable.prototype.handleCellClick = function() {
  // Now, "this" references the ticketTable object within the handler
  alert(this.tickets.length);
}</code>

En liant "this" à l'objet ticketTable, vous pouvez accéder à ses propriétés et méthodes dans la fonction handleCellClick, comme prévu.

Vous pouvez également utiliser la fonction handleEvent pour intercepter tous les événements et définir explicitement la valeur de "this":

<code class="js">ticketTable.prototype.handleEvent = function(event) {
  switch (event.type) {
    case "click":
      // "this" references the ticketTable object
      alert(this.tickets.length);
      break;
    // ...
  }
}</code>

Dans ce cas, "this" fera toujours référence à l'objet ticketTable lors de la gestion des événements, quel que soit l'élément qui a déclenché l'événement.

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!