Les méthodes de la classe que les gestionnaires d'événements en JavaScript?

Est-il une bonne pratique ou de façon courante en JavaScript pour avoir des membres de la classe des gestionnaires d'événement?

Considérons l'exemple simple suivant:

<head>
    <script language="javascript" type="text/javascript">

        ClickCounter = function(buttonId) {
            this._clickCount = 0;
            document.getElementById(buttonId).onclick = this.buttonClicked;
        }

        ClickCounter.prototype = {
            buttonClicked: function() {
                this._clickCount++;
                alert('the button was clicked ' + this._clickCount + ' times');
            }
        }

    </script>
</head>
<body>
    <input type="button" id="btn1" value="Click me" />
    <script language="javascript" type="text/javascript">
        var btn1counter = new ClickCounter('btn1');
    </script>
</body>

Le gestionnaire d'événement buttoncliked est appelée, mais les _clickCount membre est inaccessible, ou ce points à un autre objet.

Des bons conseils/articles/ressources au sujet de ce genre de problèmes?

InformationsquelleAutor JacobE | 2008-10-23

21
```
ClickCounter = function(buttonId) {
    this._clickCount = 0;
    var that = this;
    document.getElementById(buttonId).onclick = function(){ that.buttonClicked() };
}

ClickCounter.prototype = {
    buttonClicked: function() {
        this._clickCount++;
        alert('the button was clicked ' + this._clickCount + ' times');
    }
}
```
MODIFIER près de 10 ans plus tard, avec l'ES6, flèche fonctions et propriétés de la classe
```
class ClickCounter  {
   count = 0;
   constructor( buttonId ){
      document.getElementById(buttonId)
          .addEventListener( "click", this.buttonClicked );
  }
   buttonClicked = e => {
     this.count += 1;
     console.log(`clicked ${this.count} times`);
   }
}
```
https://codepen.io/anon/pen/zaYvqq
- Merci pour votre solution. Je suis aussi en train d'essayer de comprendre l'image plus grande - modèles, pratiques, etc. Tout de bons articles vous connaître?
- cette chose est grande: ejohn.org/apps/learn
- C'est un bon exemple, mais cette réponse pourrait être mieux avec une explication de pourquoi c'est une bonne solution, pour les novices autour d'ici.
- +1 woot (je l'ai dit woot!)
- Le ES2015 de modifier des œuvres par l'intermédiaire de Babel, mais le champ public syntaxe n'est pas autorisé dans tous les navigateurs encore (et encore aujourd'hui en 2019).
- n'a pas tout à fait à ma demande. La classe sous-jacente est construit par une usine, qui définit également l'écouteur d'événement. Le " il " variable lorsque l'événement se déclenche est alors celle de l'usine. Essayer de comprendre comment la méthode addEventListener sait ce que " il " est à utiliser lorsque le gestionnaire d'événement est appelé ..
- changé la méthode de gestionnaire de clicked(){ ...} à cliqué = () => {...} et il fonctionne. Parce que les fonctions anonymes utiliser " il " différemment je rassembler?
InformationsquelleAutor pawel

Une fonction rattaché directement à la propriété surclic (onclick) auront le contexte d'exécution du this propriété pointant sur l'élément.

Lorsque vous avez besoin d'un élément de l'événement à exécuter à l'égard d'une instance d'un objet (a la un délégué .NET), alors vous aurez besoin d'une clôture:-

function MyClass() {this.count = 0;}
MyClass.prototype.onclickHandler = function(target)
{
   //use target when you need values from the object that had the handler attached
   this.count++;
}
MyClass.prototype.attachOnclick = function(elem)
{
    var self = this;
    elem.onclick = function() {self.onclickHandler(this); }
    elem = null; //prevents memleak
}

var o = new MyClass();
o.attachOnclick(document.getElementById('divThing'))

C'est exactement ce que je cherchais! Merci!!!!

InformationsquelleAutor AnthonyWJones

2

Je ne sais pas pourquoi Function.prototype.bind n'était pas mentionné ici encore. Donc je vais juste laisser ça ici 😉
```
ClickCounter = function(buttonId) {
    this._clickCount = 0;
    document.getElementById(buttonId).onclick = this.buttonClicked.bind(this);
}

ClickCounter.prototype = {
    buttonClicked: function() {
        this._clickCount++;
        alert('the button was clicked ' + this._clickCount + ' times');
    }
}
```
- En effet simple et propre solution! +1
- cela ne fonctionne pas. "de cette.buttoncliked est pas défini"
- cela devrait fonctionner, veuillez consulter l'exemple. codepen.io/anon/pen/QzwRKE?les éditeurs=1010
- bon ... ça fonctionne maintenant.
InformationsquelleAutor kucherenkovova
2

Vous pouvez utiliser de la graisse de la flèche de la syntaxe, qui se lie à la portée lexicale de la fonction
```
function doIt() {
  this.f = () => {
    console.log("f called ok");
    this.g();
  }
  this.g = () => {
    console.log("g called ok");
  }
}
```
Après que vous pouvez essayer
```
var n = new doIt();
setTimeout(n.f,1000);
```
Vous pouvez l'essayer sur babel ou si votre navigateur prend en charge ES6 sur jsFiddle.

Malheureusement l'ES6 Classe -syntaxe ne semble pas permettre la création de la fonction sur le plan lexical lié à ce. Personnellement, je pense que ça pourrait bien le faire. EDIT: Il semble y avoir expérimentale ES7 fonctionnalité pour permettre.

InformationsquelleAutor Tero Tolonen

Vous devez vous connecter pour publier un commentaire.