AddEventListener kullanarak düğüme eklenen olay dinleyicilerini alın

Şu sorulara zaten baktım:

• Hata ayıklama sırasında veya JavaScript kodundan bir DOM düğümünde olay dinleyicileri nasıl bulunur?
• html öğelerindeki Javascript olay işleyicilerini programlı olarak inceleyip değiştirebilir miyim?
• JavaScript / jQuery olay bağlamalarında Firebug (veya benzer bir araç) ile hata ayıklama

ancak hiçbiri , olay dinleyicileri yaratılmadan önce prototipi addEventListenerdeğiştirmeden kullanarak bir düğüme eklenmiş olay dinleyicilerinin bir listesinin nasıl alınacağını addEventListeneryanıtlamaz.

VisualEvent tüm olay dinleyiciyi ( iphone'a özgü olanlar) göstermiyor ve bunu (bir şekilde) programlı olarak yapmak istiyorum.

Chrome DevTools, Safari Inspector ve Firebug, getEventListeners'ı (düğüm) destekler .

Yapamazsın.

Bir düğüme bağlı tüm olay dinleyicilerinin bir listesini almanın tek yolu, dinleyici eki çağrısını engellemektir.

DOM4 addEventListener

Diyor

Listede aynı tür, dinleyici ve yakalamaya sahip bir olay dinleyicisi yoksa, türü type olarak ayarlanmış, dinleyici dinleyici olarak ayarlanmış ve yakalama öğesi yakalamaya ayarlanmış ilişkili olay dinleyicileri listesine bir olay dinleyicisi ekleyin.

"Olay dinleyicileri listesine" bir olay dinleyicisinin eklendiği anlamına gelir. Bu kadar. Bu listenin ne olması gerektiği veya ona nasıl erişmeniz gerektiği konusunda bir fikir yok.

Bunu yapmanın yerel bir yolu olmadığından, bulduğum daha az müdahaleci bir çözüm var (herhangi bir 'eski' prototip yöntemi eklemeyin):

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();

$ ._ data ($ ('[selector]') [0], 'events'); kullanarak tüm jQuery olaylarını elde edebilirsiniz; [seçiciyi] ihtiyaç duyduğunuz şeye değiştirin.

JQuery tarafından eklenen tüm olayları eventsReport adında toplayan bir eklenti var.

Ayrıca bunu daha iyi biçimlendirmeyle yapan kendi eklentimi yazıyorum.

Ancak yine de, addEventListener yöntemi ile eklenen olayları toplayamıyoruz gibi görünüyor. Belki addEventListener çağrısını wrap çağrımızdan sonra eklenen olayları depolamak için sarabiliriz.

Geliştirme araçlarıyla bir öğeye eklenen olayları görmenin en iyi yolu gibi görünüyor.

Ancak orada yetki verilen olayları görmeyeceksiniz. Bu yüzden jQuery eventsReport'a ihtiyacımız var.

GÜNCELLEME: ŞİMDİ addEventListener yöntemi tarafından eklenen olayları görebiliriz BU SORUYU SAĞ CEVAPLARINA BAKINIZ.

Bunu kodla yapmanın bir yolunu bulamıyorum, ancak stok Firefox 64'te olaylar, MDN'nin Olay Dinleyicileri İnceleme sayfasında belirtildiği gibi Geliştirici Araçları Denetçisindeki her HTML varlığının yanında listelenir ve bu resimde gösterildiği gibi: