जावास्क्रिप्ट में अनाम कार्यों पर removeEventListener

Question 1

मेरे पास एक ऐसी वस्तु है जिसमें इसके तरीके हैं। इन विधियों को एक अनाम फ़ंक्शन के अंदर ऑब्जेक्ट में डाला जाता है। यह इस तरह दिख रहा है:

var t = {};
window.document.addEventListener("keydown", function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
});

(बहुत अधिक कोड है, लेकिन यह समस्या दिखाने के लिए पर्याप्त है)

अब मैं कुछ मामलों में इवेंट श्रोता को रोकना चाहता हूं। इसलिए मैं एक हटाने का काम करने की कोशिश कर रहा हूँ लेकिन मैं यह कैसे करना है यह पता नहीं लगा सकता। मैंने अन्य सवालों में पढ़ा है कि यह हटाने योग्य नहीं है कि गुमनाम कार्यों पर हटानेवाला काम करता है, लेकिन क्या इस स्थिति में भी ऐसा है?

अनाम कार्य के अंदर t में एक विधि है और इसलिए मुझे लगा कि यह संभव है। इस तरह दिखता है:

t.disable = function() {
    window.document.removeEventListener("keydown", this, false);
}

मैं ऐसा क्यों नहीं कर सकता?

क्या ऐसा करने का कोई और (अच्छा) तरीका है?

बोनस की जानकारी; यह केवल सफारी में काम करना है, इसलिए लापता IE का समर्थन करता है।

Question 2

मेरा मानना है कि यह एक अनाम फ़ंक्शन का बिंदु है, इसमें एक नाम या इसे संदर्भित करने का एक तरीका नहीं है।

यदि मैं आप होता तो मैं केवल एक नामांकित फ़ंक्शन बनाता, या इसे एक चर में डाल देता ताकि आपके पास इसका संदर्भ हो।

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

फिर आप इसे हटा सकते हैं

window.document.removeEventListener("keydown", handler);

Question 3

यदि आप वास्तविक फ़ंक्शन के अंदर हैं, तो आप फ़ंक्शन के संदर्भ के रूप में तर्कों का उपयोग कर सकते हैं। जैसे की:

button.addEventListener('click', function() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', arguments.callee);
});

EDIT: यदि आप सख्त मोड में काम कर रहे हैं तो यह काम नहीं करेगा ( "use strict";)

Question 4

ओटो नेस्करेला के समाधान का एक संस्करण जो सख्त मोड में काम करता है:

button.addEventListener('click', function handler() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', handler);
});

Question 5

window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));

कई अनाम कार्य हो सकते हैं, कीडाउन 1

चेतावनी: केवल काम करता है Chrome Dev Toolsऔर कोड में उपयोग नहीं किया जा सकता : लिंक

Question 6

आधुनिक ब्राउज़रों में आप निम्न कार्य कर सकते हैं ...

button.addEventListener( 'click', () => {
    alert( 'only once!' );
}, { once: true } );

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Question 7

इतना गुमनाम विकल्प नहीं

element.funky = function() {
    console.log("Click!");
};
element.funky.type = "click";
element.funky.capt = false;
element.addEventListener(element.funky.type, element.funky, element.funky.capt);
// blah blah blah
element.removeEventListener(element.funky.type, element.funky, element.funky.capt);

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

<script id="konami" type="text/javascript" async>
    var konami = {
        ptrn: "38,38,40,40,37,39,37,39,66,65",
        kl: [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
    };
    document.body.addEventListener( "keyup", function knm ( evt ) {
        konami.kl = konami.kl.slice( -9 );
        konami.kl.push( evt.keyCode );
        if ( konami.ptrn === konami.kl.join() ) {
            evt.target.removeEventListener( "keyup", knm, false );

            /* Although at this point we wish to remove a listener
               we could easily have had multiple "keyup" listeners
               each triggering different functions, so we MUST
               say which function we no longer wish to trigger
               rather than which listener we wish to remove.

               Normal scoping will apply to where we can mention this function
               and thus, where we can remove the listener set to trigger it. */

            document.body.classList.add( "konami" );
        }
    }, false );
    document.body.removeChild( document.getElementById( "konami" ) );
</script>

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

संयोग से : श्रोता को सेट करने के तुरंत बाद स्क्रिप्ट तत्व को हटाना कोड को छिपाने के लिए एक प्यारा टोटका है जो पसंद करेगा आँखों को चुभने के लिए स्पष्ट रूप से स्पष्ट नहीं था ( आश्चर्य को खराब करेगा; ;-)

तो विधि ( और अधिक सरल ) है:

element.addEventListener( action, function name () {
    doSomething();
    element.removeEventListener( action, name, capture );
}, capture );

Question 8

यह आदर्श नहीं है क्योंकि यह सभी को हटा देता है, लेकिन आपकी आवश्यकताओं के लिए काम कर सकता है:

z = document.querySelector('video');
z.parentNode.replaceChild(z.cloneNode(1), z);

एक नोड क्लोनिंग इसके सभी विशेषताओं और उनके मूल्यों को कॉपी करता है, जिसमें आंतरिक (-लाइन) श्रोता शामिल हैं। यह addEventListener () का उपयोग करते हुए इवेंट श्रोताओं को कॉपी नहीं करता है

Node.cloneNode ()

Question 9

जावास्क्रिप्ट : addEventListener विधि निर्दिष्ट श्रोता को EventTarget (तत्व | दस्तावेज़ | विंडो) पर पंजीकृत करती है, जिसे यह कहा जाता है।

EventTarget। addEventListener ( event_type , handler_function, Bubbling | कैप्चरिंग );

माउस, कीबोर्ड ईवेंट्स उदाहरण वेबकॉन कंसोल में परीक्षण:

var keyboard = function(e) {
    console.log('Key_Down Code : ' + e.keyCode);
};
var mouseSimple = function(e) {
    var element = e.srcElement || e.target;
    var tagName = element.tagName || element.relatedTarget;
    console.log('Mouse Over TagName : ' + tagName);    
};
var  mouseComplex = function(e) {
    console.log('Mouse Click Code : ' + e.button);
} 

window.document.addEventListener('keydown',   keyboard,      false);
window.document.addEventListener('mouseover', mouseSimple,   false);
window.document.addEventListener('click',     mouseComplex,  false);

removeEventListener विधि पहले से EventTarget.addEventListener () के साथ पंजीकृत ईवेंट श्रोता को हटा देती है।

window.document.removeEventListener('keydown',   keyboard,     false);
window.document.removeEventListener('mouseover', mouseSimple,  false);
window.document.removeEventListener('click',     mouseComplex, false);

क्या में उपयोग कर सकता हूँ

Question 10

इसे और अधिक अप-टू-डेट दृष्टिकोण देने के लिए:

//one-time fire
element.addEventListener('mousedown', {
  handleEvent: function (evt) {
    element.removeEventListener(evt.type, this, false);
  }
}, false);

Question 11

मैं एक ही समस्या में फंस गया हूं और यह सबसे अच्छा समाधान था जो मुझे मिल सकता है:

/*Adding the event listener (the 'mousemove' event, in this specific case)*/
element.onmousemove = function(event) {
    /*do your stuff*/
};
/*Removing the event listener*/
element.onmousemove = null;

कृपया ध्यान रखें कि मैंने केवल windowतत्व के लिए और 'mousemove'घटना के लिए यह परीक्षण किया है , इसलिए इस दृष्टिकोण के साथ कुछ समस्याएं हो सकती हैं।

Question 12

संभवतः जो आप पूछ रहे हैं उसके संदर्भ में सबसे अच्छा समाधान नहीं है। मैंने अभी भी घटना श्रोता मंगलाचरण के साथ अनाम फ़ंक्शन घोषित इनलाइन को हटाने के लिए एक कुशल विधि निर्धारित नहीं की है।

मैं व्यक्तिगत रूप <target>से इवेंट श्रोता मंगलाचरण के बाहर फ़ंक्शन को स्टोर करने और घोषित करने के लिए एक चर का उपयोग करता हूं जैसे:

const target = document.querySelector('<identifier>');

function myFunc(event) { function code; }

target.addEventListener('click', myFunc);

फिर श्रोता को हटाने के लिए:

target.removeEventListener('click', myFunc);

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

Question 13

मुझे पता है कि यह काफी पुराना धागा है, लेकिन मुझे लगा कि मैं इसे उपयोगी मानने वालों के लिए अपने दो सेंट में रख सकता हूं।

स्क्रिप्ट (अप्रसिद्ध विधि नामों के बारे में माफी):

window.Listener = {
    _Active: [],
    remove: function(attached, on, callback, capture){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            if(current[0] === attached && current[1] === on && current[2] === callback){
                attached.removeEventListener(on, callback, (capture || false));
                return this._Active.splice(i, 1);
            }
        }
    }, removeAtIndex(i){
        if(this._Active[i]){
            var remove = this._Active[i];
            var attached = remove[0], on = remove[1], callback = remove[2];
            attached.removeEventListener(on, callback, false);
            return this._Active.splice(i, 1);
        }
    }, purge: function(){
        for(var i = 0; i < this._Active.length; i++){
            var current = this._Active[i];
            current[0].removeEventListener(current[1], current[2]);
            this._Active.splice(i, 1);
        }
    }, declare: function(attached, on, callback, capture){
        attached.addEventListener(on, callback, (capture || false));
        if(this._Active.push([attached, on, callback])){
            return this._Active.length - 1;
        }
    }
};

और आप इसे इस तरह से उपयोग कर सकते हैं:

// declare a new onclick listener attached to the document
var clickListener = Listener.declare(document, "click" function(e){
    // on click, remove the listener and log the clicked element
    console.log(e.target);
    Listener.removeAtIndex(clickListener);
});

// completely remove all active listeners 
// (at least, ones declared via the Listener object)
Listener.purge();

// works exactly like removeEventListener
Listener.remove(element, on, callback);

Question 14

window.document.onkeydown = function(){};