addEventListener를 사용하여 노드에 연결된 이벤트 리스너 가져 오기

addEventListener를 사용하여 노드에 연결된 이벤트 리스너 가져 오기

---

나는 이미 다음 질문을 살펴 보았습니다.

• 디버깅 할 때 또는 JavaScript 코드에서 DOM 노드에서 이벤트 리스너를 찾는 방법은 무엇입니까?
• html 요소에서 Javascript 이벤트 핸들러를 프로그래밍 방식으로 검사하고 수정할 수 있습니까?
• Firebug (또는 유사한 도구)로 JavaScript / jQuery 이벤트 바인딩을 디버그하는 방법

그러나 그들 중 어느 것도 이벤트 리스너가 생성되기 전에 프로토 타입 addEventListener을 수정하지 않고를 사용하여 노드에 연결된 이벤트 리스너 목록을 얻는 방법에 대한 대답은 없습니다 addEventListener.

VisualEvent 는 모든 이벤트 리스너 (iphone 특정 항목)를 표시하지 않으며 프로그래밍 방식으로이 작업을 수행하고 싶습니다.

---

Chrome DevTools, Safari Inspector 및 Firebug는 getEventListeners (node)를 지원 합니다 .

---

당신은 할 수 없습니다.

노드에 연결된 모든 이벤트 리스너의 목록을 가져 오는 유일한 방법은 리스너 연결 호출을 가로채는 것입니다.

DOM4 addEventListener

말한다

유형, 리스너 및 캡처가 동일한 목록에 이미 이벤트 리스너가없는 경우, 유형이 유형으로, 리스너가 리스너로, 캡처가 캡처로 설정된 이벤트 리스너의 연관된 목록에 이벤트 리스너를 추가하십시오.

이벤트 리스너가 "이벤트 리스너 목록"에 추가됨을 의미합니다. 그게 다야. 이 목록이 무엇이어야하는지, 어떻게 액세스해야하는지에 대한 개념이 없습니다.

---

이 작업을 수행하는 기본 방법이 없으므로 여기에 덜 방해가되는 솔루션이 있습니다 ( '오래된'프로토 타입 메서드를 추가하지 마십시오).

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');를 사용하여 모든 jQuery 이벤트를 얻을 수 있습니다. [선택기]를 필요한 것으로 변경하십시오.

There is a plugin that gather all events attached by jQuery called eventsReport.

Also i write my own plugin that do this with better formatting.

But anyway it seems we can't gather events added by addEventListener method. May be we can wrap addEventListener call to store events added after our wrap call.

It seems the best way to see events added to an element with dev tools.

But you will not see delegated events there. So there we need jQuery eventsReport.

UPDATE: NOW We CAN see events added by addEventListener method SEE RIGHT ANSWER TO THIS QUESTION.

---

I can't find a way to do this with code, but in stock Firefox 64, events are listed next to each HTML entity in the Developer Tools Inspector as noted on MDN's Examine Event Listeners page and as demonstrated in this image:

참고 URL : https://stackoverflow.com/questions/9046741/get-event-listeners-attached-to-node-using-addeventlistener