AddEventListener का उपयोग करके नोड से जुड़े इवेंट श्रोता प्राप्त करें

Question

मैंने पहले से ही इन सवालों को देखा है:

• डीबगिंग या जावास्क्रिप्ट कोड से डोम नोड पर ईवेंट श्रोताओं को कैसे खोजें?
• क्या मैं html तत्वों पर जावास्क्रिप्ट इवेंट हैंडलर की जांच और संशोधित कर सकता हूं?
• Firebug (या समान टूल) के साथ जावास्क्रिप्ट / jQuery ईवेंट बाइंडिंग को डीबग कैसे करें

हालाँकि, उनमें से कोई भी उत्तर नहीं देता है कि इवेंट श्रोताओं को बनाने से पहले प्रोटोटाइप addEventListenerको संशोधित किए बिना, नोड श्रोताओं से जुड़े इवेंट श्रोताओं की सूची कैसे प्राप्त की जाए addEventListener।

VisualEvent सभी ईवेंट श्रोता (iPhone विशिष्ट वाले) प्रदर्शित नहीं करता है और मैं यह (कुछ) प्रोग्रामेटिक रूप से करना चाहता हूं।

Comments

डीबगिंग पर या JS कोड से इवेंट श्रोताओं को खोजने के लिए कैसे

— निकोले

"कुछ प्रोग्रामेटिक रूप से" और इस प्रश्न के लिए स्वीकृत तथ्य यह है कि एक devtools सुविधा यह सूचीबद्ध प्रश्न का एक डुप्लिकेट बनाता है। जेएस समाधान की तलाश करने वालों के लिए, उत्तर "एक नहीं है"

— निकोले

Answer 1

क्रोम DevTools, Safari Inspector और Firebug getEventListeners (नोड) का समर्थन करते हैं ।

Comments

मैं यह नोट करना चाहता हूं कि getEventListeners विधि फ़ायरफ़ॉक्स 35 संस्करण का समर्थन नहीं करती है।

— MURATSPLAT

यह फ़ायरफ़ॉक्स पर काम नहीं कर सकता है, लेकिन फिर कई ब्राउज़रों पर विकसित होता है / यदि किसी मौजूदा साइट को संशोधित करने की आवश्यकता है तो यह निश्चित है ... बहुत बहुत!

— जेसनएक्सए

फायरफॉक्स 69 नहीं।

— विटाली ज़डेनविच

Answer 2

आप नहीं कर सकते।

नोड से जुड़े सभी ईवेंट श्रोताओं की सूची प्राप्त करने का एकमात्र तरीका श्रोता लगाव कॉल को रोकना है।

DOM4 addEventListener

कहते हैं

ईवेंट श्रोताओं को ईवेंट श्रोताओं की संबंधित सूची में टाइप करने के लिए सेट श्रोता के साथ जोड़ें, श्रोता को श्रोता पर सेट करने के लिए सेट करें और कैप्चर करने के लिए सेट करें, जब तक कि उस सूची में एक ही प्रकार, श्रोता और कैप्चर के साथ पहले से ही कोई इवेंट श्रोता न हो।

मतलब कि एक ईवेंट श्रोता को "इवेंट श्रोताओं की सूची" में जोड़ा जाता है। बस इतना ही। इस बात की कोई धारणा नहीं है कि यह सूची क्या होनी चाहिए और न ही आपको इसे कैसे एक्सेस करना चाहिए।

Comments

कुछ औचित्य या तर्क की आपूर्ति का कोई भी मौका क्यों इस तरह से काम करना चाहिए? स्पष्ट रूप से ब्राउज़र जानता है कि श्रोताओं के सभी क्या हैं।

— डेथ एग्रिअसियस

@ user973810: आप कैसे चाहते हैं कि वह इसे सही ठहराए? DOM API इसे करने का कोई तरीका प्रदान नहीं करता है और वर्तमान ब्राउज़रों में इसे करने के लिए कोई गैर-मानक तरीके नहीं हैं। जैसा कि यह मामला है, मैं वास्तव में नहीं जानता। यह एक उचित काम करना चाहता है।

— टिम डाउन

मैंने इसके लिए DOM में API जोड़ने के बारे में कुछ सूत्र देखे हैं।

— रेयनोस

@TimDown संपादन मदद करता है। यह देखते हुए कि "getEventListeners" जैसी किसी चीज़ के लिए कोई विनिर्देश नहीं है, यह बताता है कि ऐसा क्यों नहीं है।

— डार्थ एलीगस

Answer 3

चूँकि ऐसा करने का कोई देशी तरीका नहीं है, यहाँ पाया गया कम घुसपैठ का समाधान है (न ही किसी 'पुराने' प्रोटोटाइप तरीकों को जोड़ें):

var ListenerTracker=new function(){
    var is_active=false;
    // listener tracking datas
    var _elements_  =[];
    var _listeners_ =[];
    this.init=function(){
        if(!is_active){//avoid duplicate call
            intercep_events_listeners();
        }
        is_active=true;
    };
    // register individual element an returns its corresponding listeners
    var register_element=function(element){
        if(_elements_.indexOf(element)==-1){
            // NB : split by useCapture to make listener easier to find when removing
            var elt_listeners=[{/*useCapture=false*/},{/*useCapture=true*/}];
            _elements_.push(element);
            _listeners_.push(elt_listeners);
        }
        return _listeners_[_elements_.indexOf(element)];
    };
    var intercep_events_listeners = function(){
        // backup overrided methods
        var _super_={
            "addEventListener"      : HTMLElement.prototype.addEventListener,
            "removeEventListener"   : HTMLElement.prototype.removeEventListener
        };

        Element.prototype["addEventListener"]=function(type, listener, useCapture){
            var listeners=register_element(this);
            // add event before to avoid registering if an error is thrown
            _super_["addEventListener"].apply(this,arguments);
            // adapt to 'elt_listeners' index
            useCapture=useCapture?1:0;

            if(!listeners[useCapture][type])listeners[useCapture][type]=[];
            listeners[useCapture][type].push(listener);
        };
        Element.prototype["removeEventListener"]=function(type, listener, useCapture){
            var listeners=register_element(this);
            // add event before to avoid registering if an error is thrown
            _super_["removeEventListener"].apply(this,arguments);
            // adapt to 'elt_listeners' index
            useCapture=useCapture?1:0;
            if(!listeners[useCapture][type])return;
            var lid = listeners[useCapture][type].indexOf(listener);
            if(lid>-1)listeners[useCapture][type].splice(lid,1);
        };
        Element.prototype["getEventListeners"]=function(type){
            var listeners=register_element(this);
            // convert to listener datas list
            var result=[];
            for(var useCapture=0,list;list=listeners[useCapture];useCapture++){
                if(typeof(type)=="string"){// filtered by type
                    if(list[type]){
                        for(var id in list[type]){
                            result.push({"type":type,"listener":list[type][id],"useCapture":!!useCapture});
                        }
                    }
                }else{// all
                    for(var _type in list){
                        for(var id in list[_type]){
                            result.push({"type":_type,"listener":list[_type][id],"useCapture":!!useCapture});
                        }
                    }
                }
            }
            return result;
        };
    };
}();
ListenerTracker.init();

Comments

आपको इसे इंटरसेप्ट विंडो इवेंट श्रोताओं को भी बनाना चाहिए। इसके अलावा, यह महान काम करता है!

Answer 4

आप $ ._ डेटा ($ ('[चयनकर्ता]') [0], 'ईवेंट्स' का उपयोग करके सभी jQuery ईवेंट प्राप्त कर सकते हैं; [चयनकर्ता] को आपकी ज़रूरत के अनुसार बदलें।

एक प्लगइन है जो jQuery द्वारा जुड़ी सभी घटनाओं को इकट्ठा करता है जिन्हें ईवेंटपोर्ट कहा जाता है।

इसके अलावा, मैं अपना खुद का प्लगइन लिखता हूं जो बेहतर प्रारूपण के साथ ऐसा करता है।

लेकिन वैसे भी ऐसा लगता है कि हम addEventListener विधि द्वारा जोड़े गए घटनाओं को इकट्ठा नहीं कर सकते हैं। हो सकता है कि हम अपने रैप कॉल के बाद जोड़े गए ईवेंट को स्टोर करने के लिए addEventListener कॉल को लपेट सकते हैं।

यह देव उपकरणों के साथ एक तत्व में जोड़े गए घटनाओं को देखने का सबसे अच्छा तरीका लगता है।

लेकिन आप वहां प्रतिनिधि कार्यक्रम नहीं देखेंगे। तो वहाँ हम jQuery घटनाओं की जरूरत है।

अद्यतन: अब हम इस सवाल को जोड़कर देख सकते हैं कि addEventListener विधि द्वारा जोड़ा गया है।

Comments

यह एक निजी और पदावनत इंटरफ़ेस है और यह जल्द ही दूर हो सकता है इसलिए उस पर भरोसा न करें।

— मैगोल

हां, लेकिन जिस समय मैंने उत्तर दिया, देव उपकरणों में ऐसी क्षमता नहीं थी। इसलिए, चुनने के लिए कुछ भी नहीं था।

— रांटिव

यह @Rantiev पदावनत है, क्या आप उस उत्तर को हटा सकते हैं?

— जूलियो मरीन्स

Answer 5

मुझे कोड के साथ ऐसा करने का कोई तरीका नहीं मिल रहा है, लेकिन स्टॉक फ़ायरफ़ॉक्स 64 में, घटनाक्रम को टूल टूल्स इंस्पेक्टर में प्रत्येक HTML इकाई के बगल में सूचीबद्ध किया गया है, जैसा कि एमडीएन के एक्सामाइन इवेंट श्रोताओं के पेज पर और इस छवि में प्रदर्शित किया गया है: