Get detektory zdarzeń dołączone do węzła za pomocą addEventListener

Question

już spojrzał na te pytania:

• How to find event listeners on a DOM node when debugging or from the JavaScript code?
• can I programmatically examine and modify Javascript event handlers on html elements?
• How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)

jednak żaden z nich odpowiedzi Jak uzyskać listę detektorów zdarzeń dołączonych do węzła przy użyciu addEventListener, bez modyfikowania prototypu addEventListener przed odsłuchaniem zdarzenia Tworzy się.

VisualEvent nie wyświetla wszystkich detektorów zdarzeń (specyficznych dla iPhone'a) i chcę to zrobić (nieco) programowo.

Answer 1

Chrome DevTools, Safari Inspector i Firebug support getEventListeners(node).

Answer 2

Nie możesz.

Jedynym sposobem uzyskania listy wszystkich detektorów zdarzeń dołączonych do węzła jest przechwycenie wywołania załącznika odbiornika.

DOM4 addEventListener

Mówi

Dołącz detektor zdarzeń do powiązanej listy detektorów zdarzeń o typie ustawiony na typ, słuchacza ustawionym na słuchacza, a przechwytywania zestaw do przechwytywania, chyba że już jest wydarzeniem Listener na tej liście z tego samego typu, słuchacza i przechwytywania.

Znaczenie, że detektor zdarzeń został dodany do "listy detektorów zdarzeń". To wszystko. Nie ma pojęcia, co ta lista powinna być i jak należy uzyskać do niej dostęp.

Answer 3

można uzyskać wszystkie zdarzenia jQuery używając $ ._ dane ($ ('[selektor]') [0], 'wydarzenia'); zmień [Selektor] na to, czego potrzebujesz.

Istnieje wtyczka, która gromadzi wszystkie zdarzenia dołączone przez jQuery o nazwie zdarzeniaReport.

Również piszę własną wtyczkę, która robi to z lepszym formatowaniem.

Ale wydaje się, że nie możemy gromadzić zdarzeń dodanych przez metodę addEventListener. Możemy zawinąć wywołanie addEventListener do przechowywania zdarzeń dodanych po naszym wywołaniu wrap.

Wygląda na to, że najlepiej jest zobaczyć zdarzenia dodane do elementu za pomocą narzędzi programistycznych.

Ale nie będzie tam żadnych delegowanych wydarzeń. Więc potrzebujemy zdarzeń jQueryReport.

AKTUALIZACJA: TERAZ Możemy zobaczyć zdarzenia dodane przez metodę addEventListener ZOBACZ ODPOWIEDŹ NA TO PYTANIE.

Answer 4

Ponieważ nie ma natywny sposób to zrobić, tutaj jest mniej inwazyjne rozwiązanie znalazłem (nie dodawać żadnych „starych” metod prototyp):

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