javascript - एक अज्ञात घटना श्रोता को हटा रहा है




greasemonkey userscripts (8)

इस तरह जोड़े गए इवेंट श्रोता को हटाने के लिए वैसे भी है:

element.addEventListener(event, function(){/* do work here */}, false);

तत्व को बदलने के बिना?


बेनामी बाध्य घटना श्रोताओं

किसी तत्व के लिए सभी ईवेंट श्रोताओं को हटाने का सबसे आसान तरीका अपने outerHTML को स्वयं असाइन करना है। यह क्या करता है एचटीएमएल पार्सर के माध्यम से एचटीएमएल का एक स्ट्रिंग प्रतिनिधित्व भेजता है और तत्व को पार्स किए गए HTML को असाइन करता है। चूंकि कोई जावास्क्रिप्ट पास नहीं हुआ है, इसलिए कोई बाध्य ईवेंट श्रोताओं नहीं होंगे।

document.getElementById('demo').addEventListener('click', function(){
    alert('Clickrd');
    this.outerHTML = this.outerHTML;
}, false);
<a id="demo" href="javascript:void(0)">Click Me</a>

बेनामी प्रतिनिधि कार्यक्रम श्रोताओं

एक चेतावनी को घटना श्रोताओं, या घटना श्रोताओं को अभिभावक तत्व पर प्रतिनिधि दिया जाता है जो प्रत्येक घटना के लिए अपने बच्चों पर मानदंडों के एक सेट से मेल खाते हैं। अतीत पाने का एकमात्र तरीका प्रतिनिधि सूची श्रोता के मानदंडों को पूरा नहीं करने के लिए तत्व को बदलना है।

document.body.addEventListener('click', function(e){
    if(e.target.id === 'demo') {
        alert('Clickrd');
        e.target.id = 'omed';
    }
}, false);
<a id="demo" href="javascript:void(0)">Click Me</a>


Jquery .off () विधि इवेंट हैंडलर को हटा देती है जो .on () से जुड़ी थीं।


आप इस तरह से सभी श्रोताओं को हटाने की कोशिश कर सकते हैं:

allClicks = getEventListeners(element).click
allClicks.forEach(function(el){el.remove()})

या आप केवल अंतिम जोड़े गए ईवेंट को हटा सकते हैं (उदाहरण के लिए)

allClicks = getEventListeners(element).click
allClicks[allClicks.length-1].remove()

आप ईवेंट श्रोता को इस तरह हटा सकते हैं:

element.addEventListener("click", function clicked() {
    element.removeEventListener("click", clicked, false);
}, false);

निम्नलिखित मेरे लिए काफी अच्छा काम किया। कोड उस मामले को संभालता है जहां एक और घटना श्रोता से तत्व से हटाने को ट्रिगर करती है। पहले से ही समारोह घोषणाओं की कोई ज़रूरत नहीं है।

myElem.addEventListener("click", myFunc = function() { /*do stuff*/ });

/*things happen*/

myElem.removeEventListener("click", myFunc);

पुराना प्रश्न, लेकिन यहां एक समाधान है।

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

element.addEventListener('click',element.fn=function fn() {
    //  Event Code
}, false);

बाद में, जब आप इसे हटाना चाहते हैं, तो आप निम्न कार्य कर सकते हैं:

element.removeEventListener('click',element.fn, false);

याद रखें, तीसरा पैरामीटर ( false ) इवेंट श्रोता जोड़ने के लिए समान मूल्य होना चाहिए।

हालांकि, प्रश्न खुद ही एक और पूछता है: क्यों?

सरल के बजाय .addEventListener() का उपयोग करने के दो कारण हैं। कुछ .onsomething() विधि:

सबसे पहले, यह कई घटना श्रोताओं को जोड़ने की अनुमति देता है। जब उन्हें चुनिंदा रूप से हटाने की बात आती है तो यह एक समस्या बन जाती है: आप शायद उन्हें नामकरण समाप्त कर देंगे। यदि आप उन्हें सभी को हटाना चाहते हैं, तो @ tidy-giant का outerHTML समाधान उत्कृष्ट है।

दूसरा, आपके पास ईवेंट को बबल करने के बजाए कैप्चर करना चुनने का विकल्प है।

यदि कोई कारण महत्वपूर्ण नहीं है, तो आप सरल सरल विधि का उपयोग करने का निर्णय ले सकते हैं।


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


हालांकि यह एक पुराना सवाल है और यह jQuery का जिक्र नहीं करता है, मैं अपना उत्तर यहां पोस्ट करूंगा क्योंकि यह खोजकर्ता 'jquery अज्ञात ईवेंट हैंडलर को हटाने' का पहला परिणाम है।

आप unbind फ़ंक्शन का उपयोग करके इसे हटाने का प्रयास कर सकते हैं।

$('#button1').click(function() {
       alert('This is a test');
});

$('#btnRemoveListener').click(function() {
       $('#button1').unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Click me</button>
<hr/>
<button id="btnRemoveListener">Remove listener</button>

हालांकि यह केवल तभी काम करता है जब आपने jQuery - not .addEventListener का उपयोग करके श्रोता जोड़ा है

इसे here मिला।






userscripts