Contexto global del objeto de manipulación de eventos de Javascript

Question

Tengo el siguiente problema en los controladores de eventos en Javascript. Tengo un objeto que tiene un manejador de eventos mousemove como ese.

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

}; 

El problema que estoy tratando de resolver se resuelve en el contexto del objeto. Dentro de mi función onMouseMove, asigna la propiedad currentMousePosition. Naturalmente, esto no funcionará porque es una función estática que maneja el evento mousemove.

Lo que estoy buscando es una técnica/método para pasar un contexto de objeto con mi controlador de eventos. El mejor ejemplo que puedo pensar es la función API de Google Maps GEvent.bind() Con ella puede pasar el objeto con la función que desea activar en el evento especificado. En esencia, estoy buscando lo mismo.

Answer 1

Hoy en día, mucha gente hace esto con un cierre explícito:

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

Pero en el futuro, que va a hacer con el método de ECMAScript Quinta edición function.bind:

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

(Cualquier otra los argumentos pasados ​​a function.bind se anteponen a la lista de argumentos de la función de destino cuando se los llama.)

Hasta que los navegadores sean compatibles function.bind n Ativamente, puedes hackear soporte en ti mismo usando prototipos y cierres. Consulte la parte inferior de this answer para ver una implementación de ejemplo.

document.body.scrollLeft 

es sólo document.body si se encuentra en el modo no estándar IE. No quieres estar en el modo Quirks. Con un doctype de Standards Mode, es document.documentElement en su lugar. Así que si usted necesita para soportar diferentes páginas que podrían utilizar cualquiera de los modos, o que todavía tienen que soportar IE5 por alguna razón (esperemos que no):

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

Answer 2

lo necesario para pasar una función de contenedor que llama a su controlador en el contexto correcto.

Por ejemplo:

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