Problèmes avec 'this': Comment accéder à la fois à un élément et à une classe dans une fonction addEvent?

Question

Ceci est probablement mieux expliqué par du code. Je sais que dans l'exemple suivant, le this à l'intérieur de la méthode addEvent est l'élément actuel contenu dans le tableau elements.

var testClass = new Class({ 
    testMethod: function() { 
     var elements = $$('.elements'); 
     elements.addEvent('click', function() { 
      console.log(this) //This will log the current element from elements 
      }); 
     } 
    }); 

Je sais aussi que dans l'exemple suivant, au lieu this fait référence à la classe testClass parce que je l'ai utilisé la méthode de liaison.

var testClass = new Class({ 
    testMethod: function() { 
     var elements = $$('.elements'); 
     elements.addEvent('click', function() { 
      console.log(this); //This will log the class testClass 
      }.bind(this)); 
     } 
    }); 

Ma question est donc de savoir comment accéder à la fois à la classe et à l'élément en cours dans addEvent?

Veuillez noter que si les éléments n'étaient pas un tableau, cela ne poserait pas de problème car je pourrais passer des éléments en tant que paramètre dans la méthode bind. Cependant, comme c'est un tableau, je ne peux pas le faire car cela me donnerait un tableau de tous les éléments au lieu de l'élément courant. Merci!

Answer 1

Vous pouvez fournir un argument à la fonction de gestionnaire d'événements événement argument, par exemple:

var TestClass = new Class({ 
    testMethod: function() { 
    var elements = $$('.elements'); 
    elements.addEvent('click', function(e) { 
     console.log(this);  // the object instance 
     console.log(e.target); // <--- the HTML element 
    }.bind(this)); 
    } 
}); 

MooTools passeront un event object normalisé comme argument e de votre fonction de gestionnaire d'événements, il vous pouvez accéder à la propriété e.target qui se référera à l'élément DOM qui a déclenché l'événement.