Получить прослушиватели событий, подключенные к узлу, с помощью addEventListener

Я уже смотрел на эти вопросы:

• Как найти прослушиватели событий на узле DOM при отладке или из кода JavaScript?
• Могу ли я программно исследовать и изменять обработчики событий Javascript в элементах html?
• Как отлаживать привязки событий JavaScript / jQuery с помощью Firebug (или аналогичного инструмента)

однако ни один из них не отвечает, как получить список прослушивателей событий, прикрепленных к узлу, используя addEventListenerбез изменения addEventListenerпрототипа до создания прослушивателей событий.

VisualEvent не отображает всех прослушивателей событий (только для iphone), и я хочу сделать это (отчасти) программно.

Chrome DevTools, Safari Inspector и Firebug поддерживают getEventListeners (узел) .

Вы не можете.

Единственный способ получить список всех прослушивателей событий, прикрепленных к узлу, - это перехватить вызов присоединения слушателя.

DOM4 addEventListener

Говорит

Добавьте прослушиватель событий в связанный список прослушивателей событий с типом, для которого задано значение type, для прослушивателя, настроенного для прослушивателя, и для захвата, для которого задано захват, если в этом списке еще нет прослушивателя событий с тем же типом, прослушивателем и захватом.

Это означает, что слушатель событий добавляется в «список слушателей событий». Вот и все. Нет никакого представления о том, каким должен быть этот список и как к нему обращаться.

Поскольку для этого нет собственного способа, вот менее навязчивое решение, которое я нашел (не добавляйте никаких «старых» методов прототипа):

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

Вы можете получить все события jQuery, используя $ ._ data ($ ('[selector]') [0], 'events'); измените [селектор] на то, что вам нужно.

Существует плагин, который собирает все события, прикрепленные jQuery, под названием eventsReport.

Также я пишу свой собственный плагин, который делает это с лучшим форматированием.

Но в любом случае, похоже, мы не можем собрать события, добавленные методом addEventListener. Возможно, мы можем обернуть вызов addEventListener для хранения событий, добавленных после нашего вызова обертывания.

Кажется, лучший способ увидеть события, добавленные к элементу, с помощью инструментов разработчика.

Но вы не увидите там делегированных событий. Итак, нам нужен jQuery eventsReport.

ОБНОВЛЕНИЕ: ТЕПЕРЬ мы МОЖЕМ видеть события, добавленные методом addEventListener. СМОТРИТЕ ВЕРНЫЙ ОТВЕТ НА ЭТОТ ВОПРОС.

Я не могу найти способ сделать это с помощью кода, но в стандартном Firefox 64 события перечислены рядом с каждым HTML-объектом в Инспекторе инструментов разработчика, как указано на странице MDN Examine Event Listeners и как показано на этом изображении: