Gestion globale des événements Javascript Contexte de l'objet

Question

J'ai le problème suivant dans les gestionnaires d'événements en Javascript. J'ai un objet qui a un gestionnaire d'événement mousemove comme ça.

function MyObject(){ } 
function MyObject.prototype = { 

    currentMousePosition: null, 
    onMouseMove: function(ev){ 
     this.currentMousePosition = this.getCoordinates(ev); 
    }, 
    getCoordinates: function(ev){ 
     if (ev.pageX || ev.pageY) 
      return { x: ev.pageX, y: ev.pageY }; 

     return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; 
    } 

}; 

Le problème que j'essaie de résoudre se résout autour du contexte d'objet. Dans ma fonction onMouseMove, elle affecte la propriété currentMousePosition. Naturellement, cela ne fonctionnera pas car c'est une fonction statique qui gère l'événement mousemove. Ce que je cherche est une technique/méthode pour passer un contexte d'objet avec mon gestionnaire d'événements. Le meilleur exemple auquel je puisse penser est la fonction de l'API Google Maps GEvent.bind() Avec elle, vous pouvez passer l'objet avec la fonction que vous voulez déclencher sur l'événement spécifié. Je cherche essentiellement la même chose.

Answer 1

Aujourd'hui, beaucoup de gens le font avec une fermeture explicite:

var myobject= new MyObject(); 
element.onmousemove= function() { 
    myobject.onMouseMove(); 
}; 

Mais à l'avenir, vous allez le faire avec la méthode ECMAScript Cinquième édition function.bind:

element.onmousemove= myobject.onMouseMove.bind(myobject); 

(Toute autre les arguments passés à function.bind sont ajoutés à la liste des arguments de la fonction cible lors de l'appel.)

Jusqu'à ce que tous les navigateurs prennent en charge function.bind n De manière active, vous pouvez pirater le support en utilisant des prototypes et des fermetures. Voir le bas de this answer pour un exemple d'implémentation.

document.body.scrollLeft 

Il est seulement document.body si vous êtes en mode IE Quirks. Vous ne voulez pas être en mode Quirks. Avec un doctype en mode standard, c'est document.documentElement à la place. Donc, si vous avez besoin de prendre en charge différentes pages qui pourraient utiliser soit des modes, ou vous avez encore besoin de soutenir IE5 pour une raison quelconque (espérons pas):

var viewport= document.compatMode==='CSS1Compat'? document.documentElement : document.body; 
return {x: ev.clientX+viewport.scrollLeft, y: ev.clientY+viewport.scrollTop}; 

Answer 2

Vous devez passer une fonction wrapper qui appelle votre gestionnaire dans le bon contexte.

Par exemple:

addHandler(function(ev) { someObject.onMouseMove(ev); });