Oggetto Javascript globale che gestisce il contesto dell'oggetto

Question

Ho il seguente problema nei gestori di eventi in Javascript. Ho un oggetto che ha un gestore di eventi mousemove in questo modo.

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 }; 
    } 

}; 

Il problema che sto cercando di risolvere risolve il contesto dell'oggetto. All'interno della mia funzione onMouseMove assegna la proprietà currentMousePosition. Naturalmente questo non funzionerà perché è una funzione statica che gestisce l'evento mousemove.

Quello che sto cercando è una tecnica/metodo per passare un contesto oggetto con il mio gestore di eventi. L'esempio migliore che posso pensare è la funzione dell'API di Google Maps GEvent.bind() Con esso è possibile passare l'oggetto con la funzione che si desidera attivare sull'evento specificato. Sto essenzialmente cercando la stessa cosa.

Answer 1

Oggi, molte persone fanno con una chiusura esplicita:

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

Ma in futuro, si faranno solo con il metodo ECMAScript quinta edizione function.bind:

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

(Qualsiasi ulteriore gli argomenti passati a function.bind vengono aggiunti all'elenco degli argomenti della funzione di destinazione quando vengono chiamati.)

Fino a quando i browser supportano tutti function.bind n attivamente, puoi hackerare il supporto in te stesso usando prototipi e chiusure. Vedere la parte inferiore di this answer per un'implementazione di esempio.

document.body.scrollLeft 

è solo document.body se si è in quirks mode IE. Non vuoi essere in modalità Quirks. Con un doctype in modalità standard, è invece document.documentElement. Quindi, se avete bisogno di supportare diverse pagine che potrebbero utilizzare una delle modalità, o è ancora necessario per supportare IE5 per qualche motivo (speriamo di no):

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

Answer 2

È necessario passare una funzione wrapper che chiama il vostro gestore sul contesto corretto.

Ad esempio:

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