ग्लोबल जावास्क्रिप्ट इवेंट हैंडलिंग ऑब्जेक्ट कॉन्टेक्स्ट

Question

मुझे जावास्क्रिप्ट में ईवेंट हैंडलर में निम्न समस्या है। मेरे पास एक ऑब्जेक्ट है जिसमें एक मूसोम इवेंट हैंडलर है।

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

}; 

समस्या जिसे हल करने का प्रयास कर रहा हूं वह ऑब्जेक्ट संदर्भ के आसपास हल करता है। मेरे onMouseMove फ़ंक्शन के भीतर यह currentMousePosition प्रॉपर्टी असाइन करता है। स्वाभाविक रूप से यह काम नहीं करेगा क्योंकि यह एक स्थिर कार्य है जो मूसोम घटना को संभालने में काम करता है।

जो मैं खोज रहा हूं वह मेरे ईवेंट हैंडलर के साथ ऑब्जेक्ट संदर्भ को पारित करने के लिए एक तकनीक/विधि है। सबसे अच्छा उदाहरण जो मैं सोच सकता हूं वह है Google मानचित्र एपीआई फ़ंक्शन GEvent.bind() इसके साथ आप ऑब्जेक्ट को उस फ़ंक्शन के साथ पास कर सकते हैं जिसे आप निर्दिष्ट ईवेंट पर आग लगाना चाहते हैं। मैं अनिवार्य रूप से एक ही चीज़ की तलाश में हूं। किसी भी आगे

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

(:

Answer 1

आज, कई लोगों को एक स्पष्ट बंद के साथ ऐसा कर:

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

लेकिन भविष्य में, आप इसे ECMAScript पांचवें संस्करण विधि function.bind साथ करूँगा function.bind को पारित तर्कों को लक्षित फ़ंक्शन की तर्क सूची में प्रीपेड किया जाता है।)

ब्राउज़र सभी समर्थन function.bind n सक्रिय रूप से, आप प्रोटोटाइप और बंद करने का उपयोग करके अपने आप में समर्थन हैक कर सकते हैं। उदाहरण कार्यान्वयन के लिए this answer के नीचे देखें।

document.body.scrollLeft 

यह केवल document.body अगर आप IE असामान्य मोड में कर रहे हैं। आप क्विर्क मोड में नहीं रहना चाहते हैं। मानक मोड मोडक्ट के साथ, यह document.documentElement इसके बजाए है। तो अगर आप विभिन्न पृष्ठों से किसी भी मोड का उपयोग हो सकता है कि समर्थन करने के लिए की जरूरत है, या आप अभी भी किसी कारण से IE5 समर्थन करने की आवश्यकता (चलो नहीं आशा):

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

Answer 2

आप एक आवरण समारोह है कि अपने हैंडलर कॉल पास करनी होगी सही संदर्भ पर।

उदाहरण के लिए:

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