बाइबल

Question

के साथ जोड़ा गया ईवेंट श्रोता को हटाकर जावास्क्रिप्ट में, बाइंड() का उपयोग करके ईवेंट श्रोता के रूप में जोड़े गए फ़ंक्शन को निकालने का सबसे अच्छा तरीका क्या है?

उदाहरण

(function(){ 

    // constructor 
    MyClass = function() { 
     this.myButton = document.getElementById("myButtonID"); 
     this.myButton.addEventListener("click", this.clickListener.bind(this)); 
    }; 

    MyClass.prototype.clickListener = function(event) { 
     console.log(this); // must be MyClass 
    }; 

    // public method 
    MyClass.prototype.disableButton = function() { 
     this.myButton.removeEventListener("click", ___________); 
    }; 

})(); 

एक ही रास्ता मैं के बारे में सोच सकते हैं बाँध के साथ जोड़ा हर श्रोता का ट्रैक रखने के लिए है।

(function(){ 

    // constructor 
    MyClass = function() { 
     this.myButton = document.getElementById("myButtonID"); 
     this.clickListenerBind = this.clickListener.bind(this); 
     this.myButton.addEventListener("click", this.clickListenerBind); 
    }; 

    MyClass.prototype.clickListener = function(event) { 
     console.log(this); // must be MyClass 
    }; 

    // public method 
    MyClass.prototype.disableButton = function() { 
     this.myButton.removeEventListener("click", this.clickListenerBind); 
    }; 

})(); 

वहाँ यह करने के लिए किसी भी बेहतर तरीके हैं:

इस विधि के साथ

उदाहरण से ऊपर?

Answer 1

इस हालांकि @machineghost क्या कहा सच था, कि घटनाओं जोड़ा गया है और उसी तरह से हटा दिया जाता है, समीकरण के लापता हिस्सा था:

एक नया समारोह संदर्भ बनाई गई है .bind() के बाद कहा जाता है!

var x = this.myListener.bind(this); 
Toolbox.addListener(window, 'scroll', x); 
Toolbox.removeListener(window, 'scroll', x); 

यह काम करता है के रूप में मेरे लिए उम्मीद:

Does bind() change the function reference? | How to set permanently?

तो, जोड़ सकते हैं या इसे हटाने के लिए, संदर्भ में एक चर के लिए असाइन देखें।

Answer 2

इससे कोई फर्क नहीं पड़ता कि आप बाध्य कार्य का उपयोग करते हैं या नहीं; आप इसे किसी अन्य घटना हैंडलर के समान ही हटा देते हैं। यदि आपकी समस्या यह है कि बाध्य संस्करण अपना अनूठा कार्य है, तो आप या तो बाध्य संस्करणों का ट्रैक रख सकते हैं, या removeEventListener हस्ताक्षर का उपयोग कर सकते हैं जो एक विशिष्ट हैंडलर नहीं लेता है (हालांकि निश्चित रूप से यह अन्य ईवेंट हैंडलर को हटा देगा प्रकार)।

(एक साइड नोट के रूप में, addEventListener सभी ब्राउज़रों में काम नहीं करता है; आपको वास्तव में आपके लिए एक क्रॉस-ब्राउज़र तरीके से अपने ईवेंट हुक-अप करने के लिए jQuery जैसी लाइब्रेरी का उपयोग करना चाहिए। इसके अलावा, jQuery की अवधारणा है नामांकित घटनाएं, जो आपको "click.foo" से जुड़ने की अनुमति देती हैं; जब आप ईवेंट को हटाना चाहते हैं तो आप विशिष्ट हैंडलर को जानने या अन्य हैंडलर को हटाने के बिना jQuery को "सभी foo ईवेंट हटाएं" बता सकते हैं।)

Answer 3

यदि

जैसा कि ऊपर बताया गया है, आप 'ऑनक्लिक' का उपयोग करना चाहते हैं, आप इसे आजमा सकते हैं:

(function(){ 
    var singleton = {}; 

    singleton = new function() { 
     this.myButton = document.getElementById("myButtonID"); 

     this.myButton.onclick = function() { 
      singleton.clickListener(); 
     }; 
    } 

    singleton.clickListener = function() { 
     console.log(this); // I also know who I am 
    }; 

    // public function 
    singleton.disableButton = function() { 
     this.myButton.onclick = ""; 
    }; 
})(); 

मुझे आशा है कि इससे मदद मिलती है।

Answer 4

यह थोड़ी देर हो चुकी है लेकिन एमडीएन के पास इस पर एक सुपर स्पष्टीकरण है। इससे मुझे यहां सामानों से ज्यादा मदद मिली।

MDN :: EventTarget.addEventListener - The value of "this" within the handler

यह handleEvent कार्य करने के लिए एक बढ़िया विकल्प देता है।

इस के साथ और बाँध के बिना एक उदाहरण है:

var Something = function(element) { 
    this.name = 'Something Good'; 
    this.onclick1 = function(event) { 
    console.log(this.name); // undefined, as this is the element 
    }; 
    this.onclick2 = function(event) { 
    console.log(this.name); // 'Something Good', as this is the binded Something object 
    }; 
    element.addEventListener('click', this.onclick1, false); 
    element.addEventListener('click', this.onclick2.bind(this), false); // Trick 
} 

ऊपर के उदाहरण में एक समस्या यह है कि आप बाँध के साथ श्रोता नहीं निकाल सकते है।एक अन्य समाधान किसी भी घटना को पकड़ने के लिए हैंडलएवेंट नामक एक विशेष समारोह का उपयोग कर रहा है:

Answer 5

उन लोगों के लिए जिनके पास फ्लक्स स्टोर से/रिएक्ट घटक के श्रोता घटक को पंजीकृत/हटाते समय समस्या है, नीचे दिए गए लाइनों को अपने घटक के कन्स्ट्रक्टर में जोड़ें:

class App extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    // it's a trick! needed in order to overcome the remove event listener 
 
    this.onChange = this.onChange.bind(this); 
 
    } 
 
    // then as regular... 
 
    componentDidMount(){ 
 
    AppStore.addChangeListener(this.onChange); 
 
    } 
 
    
 
    componentWillUnmount(){ 
 
    AppStore.removeChangeListener(this.onChange); 
 
    } 
 

 
    onChange() { 
 
    let state = AppStore.getState(); 
 
    this.setState(state); 
 
    } 
 
    
 
    render() { 
 
    // ... 
 
    } 
 
    
 
}

Answer 6

< शेख़ी > यह 2016 है और डोम मानक हम अब और फिर हर हिट एक बहुत ही आम समस्या को हल करने में ज्यादा नहीं मदद की है। </rant >

हां एक बाध्य घटना हैंडलर को हटाने का एकमात्र तरीका बाध्य कार्य का संदर्भ रखना है और इसे अन्य समाधानों में बताए गए निकालने के लिए हटाएं।

हालांकि जब आपको कई श्रोताओं मिलते हैं तो यह गन्दा हो जाता है। कोई भी सरल कार्यों के साथ नहीं आया है जो बाध्य कार्यों के संदर्भ रखने के काम को सारणीबद्ध करता है। मैं() और ऑफ() (jQuery प्रेरित नाम) नामक दो कार्यों के साथ आया हूं जो मैंने प्रोटोटाइप में जोड़कर सभी HTMLElements में जोड़ा है। Code's here। (आईई पर केवल काम करता है 11+ के बाद से यह WeakMap उपयोग करता है)

ताकि का उपयोग कर आप घटना श्रोताओं को जोड़ने और उन्हें इतनी तरह निकाल सकते हैं:

this.myButton.on('click', this.clickListener, this); 
this.myButton.off('click', this.clickListener, this); //yup, it's removed 

कार्यान्वयन विवरण और लिए गए निर्णयों में कई हैं, तो मैं जीता इसे समझाओ :)

यदि आप मूल वस्तुओं में फ़ंक्शंस जोड़ने को पसंद नहीं करते हैं, तो आप मेरे कोड को थोड़ा सा संपादित करके प्राप्त कर सकते हैं। (लेकिन गंभीरता से, डीओएम मानक को हमारे लिए इसे पहले स्थान पर हल करने के लिए कुछ एपीआई जोड़ा जाना चाहिए था)।

Answer 7

यहाँ समाधान है:

var o = { 
    list: [1, 2, 3, 4], 
    add: function() { 
    var b = document.getElementsByTagName('body')[0]; 
    b.addEventListener('click', this._onClick()); 

    }, 
    remove: function() { 
    var b = document.getElementsByTagName('body')[0]; 
    b.removeEventListener('click', this._onClick()); 
    }, 
    _onClick: function() { 
    this.clickFn = this.clickFn || this._showLog.bind(this); 
    return this.clickFn; 
    }, 
    _showLog: function (e) { 
    console.log('click', this.list, e); 
    } 
}; 


// Example to test the solution 
o.add(); 

setTimeout(function() { 
    console.log('setTimeout'); 
    o.remove(); 
}, 5000);