जावास्क्रिप्ट हटाने EventListener कक्षा

Question

के अंदर काम नहीं कर रहा है मैं es6 कक्षाओं के साथ खेल रहा हूं, और एक साधारण माउस वर्ग स्थापित करने की कोशिश की।

addEventListener काम करता है, लेकिन किसी कारण से मैं removeEventListener के साथ उन्हें हटाने में असमर्थ हूं। मुझे लगता है कि संदर्भ बाध्यकारी के साथ इसका कुछ संबंध है, लेकिन मैं यह नहीं समझ सकता कि इसे कैसे ठीक किया जाए।

'use strict' 
class Mouser { 
    constructor() { 
     this.counter = 0 
     this.clicked = function (event) { 
      this.counter++ 
      console.log('clicks:', this.counter) 
      if (this.counter >= 10) this.remove() 
     } 
     window.addEventListener('click', this.clicked.bind(this)) 
    } 

    remove() { 
     console.log('Removing click listener') // this line runs .. 
     window.removeEventListener('click', this.clicked.bind(this)) 
    } 
} 

var mouse = new Mouser() 

Answer 1

प्रत्येक बार जब आप this.clicked.bind(this) पर कॉल करते हैं, तो यह एक नया और अलग फ़ंक्शन देता है। इस प्रकार, जो कार्य आप addEventListener() पर गुजर रहे हैं वह उस कार्य के समान नहीं है जिसे आप removeEventListenter() पर भेज रहे हैं, इसलिए इस प्रकार निकालने से कोई मिलान नहीं मिलता है और कुछ भी नहीं हटाता है। काम को हटाने के लिए आपको दोनों को एक ही फ़ंक्शन को पास करना होगा।

आपको उस फ़ंक्शन के लिए स्थानीय रूप से संग्रहीत संदर्भ बनाना होगा जिससे आप इसे जोड़ने और निकालने के लिए पास कर सकें। ऐसा करने के कई तरीके हैं, लेकिन चूंकि यह ऑब्जेक्ट उन्मुख कोड है, इसलिए आप ऑब्जेक्ट में संदर्भ को संग्रहित करना चाहते हैं ताकि प्रत्येक ऑब्जेक्ट का अपना संदर्भ हो।

'use strict' 
class Mouser { 
    constructor() { 
    this.counter = 0 
    this.clicked = function (event) { 
     this.counter ++ 
     console.log('clicks:', this.counter) 
     if (this.counter >= 10) this.remove() 
    } 
    // save the click handler so it can be used in multiple places 
    this.clickHandler = this.clicked.bind(this); 
    window.addEventListener('click', this.clickHandler) 
    } 

    remove() { 
    console.log('Removing click listener') // this line runs .. 
    window.removeEventListener('click', this.clickHandler) 
    } 
} 

var mouse = new Mouser()