Pourquoi « ceci » se comporte-t-il de manière inattendue dans les gestionnaires d'événements JavaScript ?

Le "ceci" ambigu dans les gestionnaires d'événements

Lorsque vous travaillez avec JavaScript, il est courant de créer des gestionnaires d'événements à l'aide de la méthode addEventListener. Cependant, un comportement particulier apparaît lorsque l'on tente d'accéder aux propriétés d'un objet au sein de ces gestionnaires : "this" ne fait pas référence à l'objet mais plutôt à l'élément qui a déclenché l'événement.

Scénario de problème

Considérez le code suivant, qui illustre ce problème :

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick, false);
};

ticketTable.prototype.handleCellClick = function() {
  // "this" refers to the clicked cell element, not the ticketTable object
  // ...
};

Dans la fonction handleCellClick, l'accès à this.tickets échouerait car "this" fait référence à la cellule cliquée, et non à l'instance ticketTable.

Solution : Utiliser Bind

Pour résoudre ce problème, nous pouvons utiliser la méthode bind, qui nous permet de définir explicitement la valeur de "this" pour une fonction donnée .

function ticketTable(ticks) {
  this.tickets = ticks;
}

ticketTable.prototype.render = function(element) {
  // Render table...
  cell1.addEventListener("click", this.handleCellClick.bind(this), false);
};

En utilisant bind(this), nous nous assurons que lorsque la fonction handleCellClick sera appelée ultérieurement, "this" fera correctement référence à l'objet ticketTable, nous permettant d'accéder à ses propriétés telles que this.tickets .

Solutions alternatives

Outre la liaison, d'autres approches incluent l'utilisation d'une fonction de gestionnaire d'événements explicitement définie pour utiliser "this" (pas la propriété onclick) ou la création d'un handleEvent spécial fonction pour gérer tous les événements.

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!