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

Question

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

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

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

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

Answer 1

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

Answer 2

Вы не можете.

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

DOM4 addEventListener

Says

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

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

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

Answer 4

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

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

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

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

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

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

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

Answer 5

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