Global Javascript Olay İşleme Nesne Bağlamı

Question

Javascript'te olay işleyicilerinde aşağıdaki sorun var. Benim gibi bir mousemove olay işleyicisi olan bir nesne var.

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

}; 

Çözmeyi denediğim sorun, nesne bağlamında giderir. OnMouseMove işlevimde, currentMousePosition özelliğini atar. Doğal olarak bu işe yaramaz çünkü mousemove olayını işleyen statik bir işlev.

Aradığım şey, olay işleyicim ile bir nesne bağlamını geçiren bir teknik/yöntem. Düşünebildiğim en iyi örnek, Google Maps API işlevi GEvent.bind() Bununla birlikte, nesneyi belirtilen olayda yanmak istediğiniz işleve iletebilirsiniz. Ben aslında aynı şeyi arıyorum. (Herhangi bir başka

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

:

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

Ama gelecekte, ECMAScript Beşinci Baskı yöntemiyle function.bind ile yapacağım:

Answer 1

Bugün, birçok kişi bu açık bir kapatma ile ilgisi function.bind'a iletilen argümanlar, çağrıldığında hedef işlevin argüman listesine eklenir.)

Tarayıcılar tüm desteklere kadar function.bind n Öncelikle, prototipleri ve kapanışları kullanarak kendi kendinize destek alabilirsiniz. Örnek bir uygulama için this answer'un altına bakın. IE Süslemeler Modunda ise

document.body.scrollLeft 

Sadece document.body bu. Quirks Modunda olmak istemezsiniz. Standartlar Modu doctype ile, bunun yerine document.documentElement. Eğer modlarından birini kullanabilir farklı sayfaları desteklemesi gerekir yoksa hala nedense IE5 desteklemesi gerekir Yani eğer (en umut etmeyelim):

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

Answer 2

Sen işleyicisi çağıran bir sarmalayıcı işlevi geçmesi gerekiyor doğru bağlamda. Örneğin

:

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