Comment faire référence à l'objet dans le gestionnaire d'événements JavaScript?

Question

Note: Cette question utilise jQuery mais la question n'a rien à voir avec jQuery!

Bon alors j'ai cet objet:

var box = new BigBox(); 

Cet objet a une méthode nommée Serialize():

box.AddToPage(); 

Voici la méthode AddToPage():

function AddToPage() 
{ 
    $('#some_item').html("<div id='box' onclick='this.OnClick()'></div>"); 
} 

Le problème ci-dessus est le this.OnClick() (qui évidemment ne fonctionne pas). J'ai besoin du gestionnaire onclick pour appeler un membre de la classe BigBox. Comment puis-je faire ceci? Comment un objet peut-il se référer lui-même dans un gestionnaire d'événements?

Answer 1

N'ajoutez pas de gestionnaires d'événements avec du code en ligne.

function AddToPage() 
{ 
    $('#some_item').html("<div id='box'></div>"); 
    $('#box').click(this.OnClick); 
} 

EDIT:

Une autre façon (évite la sélection supplémentaire):

function AddToPage() 
{ 
    var div = $('<div id="box"></div>'); // probably don't need ID anymore.. 
    div.click(this.OnClick); 

    $('#some_item').append(div); 
} 

EDIT (en réponse à "comment passer des paramètres");

Je ne suis pas sûr de ce que vous voulez passer params, mais ..

function AddToPage() 
{ 
    var self = this, div = $('<div></div>'); 
    div.click(function (eventObj) { 
     self.OnClick(eventObj, your, params, here); 
    }); 

    $('#some_item').append(div); 
} 

Answer 2

Si vous utilisez jQuery, vous pouvez séparer votre code de votre balisage (l'ancien seperation des préoccupations chose) comme ce

$(document).ready(function() { 

    var box = new BigBox(); 

    $('#box').click(function() { 
    box.serialize(); 
    }); 

}); 

Vous avez seulement besoin d'ajouter le gestionnaire de clic une fois pour tous les divs avec l'ID de la boîte. Et parce que le clic est une fonction anonyme, il obtient l'étendue de la fonction dans laquelle il est placé et donc l'accès à l'instance de boîte.

Answer 3

Vous devez joindre le gestionnaire en utilisant jQuery:

function AddToPage() 
{ 
    var self = this; 
    $('#some_item').empty().append(
     $("<div id='box'></div>") 
      .click(function() { self.OnClick(someParameter); }) 
    ); 
} 

Pour forcer le gestionnaire d'événements à appeler le contexte de votre objet (et de passer des paramètres), vous devez ajouter une fonction anonyme appelle le gestionnaire correctement. Sinon, le mot-clé this dans le gestionnaire se référera à l'élément DOM.

Answer 4

Dans jQuery 1.4, vous pouvez utiliser un proxy.

BigBox.prototype.AddToPage= function() { 
    var div= $('<div>', {id: box}); 
    div.click(jQuery.proxy(this, 'OnClick'); 
    div.appendTo('#some_item'); 
} 

Vous pouvez également utiliser une fermeture manuelle:

var that= this; 
    div.click(function(event) { that.OnClick(event); }); 

Ou, plus simplement de tous, mais nécessitant une certaine help à mettre en œuvre dans les navigateurs qui ne supportent pas encore (il y a une cinquième édition ECMAScript caractéristique):

div.click(this.OnClick.bind(this));