Bon moyen de lier une méthode de l'objet à un événement

Est-ce la façon de bien se lier et de l'événement à une méthode de l'objet en JavaScript à l'aide de jQuery?

J'ai mis en place un petit exemple de code, mais la partie que je suis concerné, c'est le deux lignes après le commentaire de "est-ce ok?"

Bien sûr, comme le rappel est une méthode de l'objet, j'ai besoin de la contexte de rester le même.

function MyPrototype(id) {

    this.id = id;
    this.sel = '#' + id;

    //*** IS THIS OK? ***
    $(this.sel).on('click', function(evt) {
        MyPrototype.prototype.mouseClick.call(this, evt); });
}

MyPrototype.prototype.mouseClick = function (evt) {

    //I want to use evt to get info about the event
    //I want use this to access properties and methods of the instance

    alert(this.id + ' was clicked');
}

myObject1 = new MyPrototype('myDiv1');
myObject2 = new MyPrototype('myDiv2');

Aussi, je peut venir à la nécessité de déliaison le cas de la fonction spécifique.

Mais la suivante ne fonctionne pas...

MyPrototype.prototype.unbindClick = function() {

    $(this.sel).off('click', function(evt) {
        MyPrototype.prototype.mouseClick.call(this, evt); });
}

myObject2.unbindClick();

Remarque que je suis de passage d'une fonction en ligne comme le gestionnaire d'événement.

OriginalL'auteur Paolo | 2013-01-15

  1. 2

    Essayer jQuery.proxy:

    function MyPrototype(id) {
    this.id = id;
    this.sel = '#' + id;

    //using jQuery.proxy:
    $(this.sel).on('click', $.proxy(this.mouseClick, this));

    //or Function.bind:
    //$(this.sel).on('click', this.mouseClick.bind(this));

    //or writing it out:
    /*
    var self = this;
    $(this.sel).on('click', function () {
      return self.mouseClick.apply(self, arguments);
    });
    */
}

MyPrototype.prototype.mouseClick = function(evt) {

    //I want to use evt to get info about the event
    //I want use this to access properties and methods of the instance

    console.log(this.id + ' was clicked');
};

var myObject1 = new MyPrototype('myDiv1');
var myObject2 = new MyPrototype('myDiv2');

    http://jsbin.com/axokuz/1/

    Sur la mise à jour de la question:

    Si vous souhaitez vous séparer d'un seul gestionnaire d'événements, vous auriez besoin d'exactement la même fonction de gestionnaire utilisé lors de la liaison. Sinon, tout événement indépendant. Ni la solution que vous avez ajoutés à la question, ni $.proxy serait une aide précieuse. Il y a des solutions, mais:

    Merci pour votre réponse, mais... ne sont pas les "appeler" et "$.proxy" approche équivalent? Ou il y a une raison je devrais toujours (ou, dans certains cas) utiliser le jQuery du proxy?
    $.proxy est juste une cale pour .bind. C'est vraiment juste une question de goût que pour toujours écrire ici le .call la construction ou l'utilisation de ce type d'aide. Comme vous êtes à l'aide de jQuery, de toute façon, c'est probablement le moyen le plus rapide pour faire de la cross-browser.
    J'ai ajouté une alternative comme un code-commentaire, un coup d'oeil.
    Yoshi, j'ai édité ma question. La solution que vous avez proposée semble être une réponse à la deuxième question, j'ai ajouté aussi, ces derniers temps. Mais il semble également que l'utilisation de jQuery est "off" avec la fonction renvoyée par "proxy" séparer la fonction de chaque objet. Corrigez-moi si je me trompe.
    voir ma mise à jour.

    OriginalL'auteur Yoshi

  2. 0

    Pour être en mesure de séparer le gestionnaire spécifique, à partir de l'élément spécifique pour l'événement jQuery proxy de l'objet doit être enregistré dans une propriété de l'objet pour être accessible à unbind temps.

    Comme ce

    function MyPrototype(id) {
    this.id = id;
    this.sel = '#' + id;
    this.handler = $.proxy(this.mouseClick, this);

    $(this.sel).on('click', this.handler);
};

MyPrototype.prototype.mouseClick = function(evt) {

    console.log(this.id + ' was clicked');
};

MyPrototype.prototype.unbindClick = function() {

    $(this.sel).off('click', this.handler);
};

    OriginalL'auteur Paolo