Jak znaleźć detektory zdarzeń w węźle DOM podczas debugowania lub z kodu JavaScript?

Mam stronę, na której niektóre detektory zdarzeń są dołączone do pól wprowadzania i pól wyboru. Czy istnieje sposób, aby dowiedzieć się, które detektory zdarzeń obserwują dany węzeł DOM i dla którego zdarzenia?

Wydarzenia są dołączane przy użyciu:

1. Prototypowe Event.observe ;
2. DOM addEventListener;
3. Jako atrybut elementu element.onclick.

Jeśli chcesz tylko sprawdzić, co dzieje się na stronie, możesz wypróbować bookmarklet Event wizualny .

Aktualizacja : Visual Event 2 dostępne.

To zależy od tego, jak zdarzenia są dołączone. Dla ilustracji załóżmy, że mamy następujący moduł obsługi kliknięć:

var handler = function() { alert('clicked!') };

Zamierzamy dołączyć go do naszego elementu przy użyciu różnych metod, z których niektóre umożliwiają inspekcję, a inne nie.

Metoda A) moduł obsługi pojedynczego zdarzenia

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Metoda B) obsługa wielu zdarzeń

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

Metoda C): jQuery

$(element).click(handler);

• 1.3.x

  // inspect
  var clickEvents = $(element).data("events").click;
  jQuery.each(clickEvents, function(key, value) {
      alert(value) // alerts "function() { alert('clicked!') }"
  })
  

• 1.4.x (przechowuje moduł obsługi w obiekcie)

  // inspect
  var clickEvents = $(element).data("events").click;
  jQuery.each(clickEvents, function(key, handlerObj) {
      alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
      // also available: handlerObj.type, handlerObj.namespace
  })
  

^{(Zobacz jQuery.fn.datai jQuery.data)}

Metoda D): Prototyp (niechlujny)

$(element).observe('click', handler);

• 1.5.x

  // inspect
  Event.observers.each(function(item) {
      if(item[0] == element) {
          alert(item[2]) // alerts "function() { alert('clicked!') }"
      }
  })
  

• 1.6 do 1.6.0.3 włącznie (tutaj było bardzo trudno)

  // inspect. "_eventId" is for < 1.6.0.3 while 
  // "_prototypeEventID" was introduced in 1.6.0.3
  var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;
  clickEvents.each(function(wrapper){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })
  

• 1.6.1 (trochę lepiej)

  // inspect
  var clickEvents = element.getStorage().get('prototype_event_registry').get('click');
  clickEvents.each(function(wrapper){
      alert(wrapper.handler) // alerts "function() { alert('clicked!') }"
  })
  

Obsługa Chrome, Firefox, Vivaldi i Safari getEventListeners(domElement)w konsoli narzędzi programisty.

Można to wykorzystać do większości celów debugowania.

Poniżej znajduje się bardzo dobre odniesienie do korzystania z niego: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Teraz robi to WebKit Inspector w przeglądarkach Chrome lub Safari. Wyświetli detektory zdarzeń dla elementu DOM po wybraniu go w panelu Elementy.

Możliwe jest wyświetlenie listy wszystkich detektorów zdarzeń w JavaScript: To nie jest takie trudne; musisz tylko zhakować prototypemetodę elementów HTML ( przed dodaniem detektorów).

function reportIn(e){
    var a = this.lastListenerInfo[this.lastListenerInfo.length-1];
    console.log(a)
}


HTMLAnchorElement.prototype.realAddEventListener = HTMLAnchorElement.prototype.addEventListener;

HTMLAnchorElement.prototype.addEventListener = function(a,b,c){
    this.realAddEventListener(a,reportIn,c); 
    this.realAddEventListener(a,b,c); 
    if(!this.lastListenerInfo){  this.lastListenerInfo = new Array()};
    this.lastListenerInfo.push({a : a, b : b , c : c});
};

Teraz każdy element anchor ( a) będzie miał lastListenerInfowłaściwość, która zawiera wszystkie jego detektory. Działa nawet do usuwania słuchaczy z anonimowymi funkcjami.

Użyj getEventListeners w Google Chrome :

getEventListeners(document.getElementByID('btnlogin'));
getEventListeners($('#btnlogin'));

(Przepisanie odpowiedzi na to pytanie, ponieważ jest ono tutaj istotne).

Podczas debugowania, jeśli chcesz tylko zobaczyć wydarzenia, polecam albo ...

1. Wydarzenie wizualne
2. Sekcja Elementy w Narzędziach programisty Chrome: wybierz element i poszukaj „Detektory zdarzeń” w prawym dolnym rogu (podobnie w przeglądarce Firefox)

Jeśli chcesz użyć zdarzeń w kodzie i używasz jQuery przed wersją 1.8 , możesz użyć:

$(selector).data("events")

zdobyć wydarzenia. Począwszy od wersji 1.8, używanie .data („zdarzenia”) jest przerywane (patrz ten zgłoszenie błędu ). Możesz użyć:

$._data(element, "events")

Kolejny przykład: zapisz wszystkie zdarzenia kliknięcia w określonym łączu do konsoli:

var $myLink = $('a.myClass');
console.log($._data($myLink[0], "events").click);

(patrz działający przykład na http://jsfiddle.net/HmsQC/ )

Niestety, użycie danych $ ._ nie jest zalecane, z wyjątkiem debugowania, ponieważ jest to wewnętrzna struktura jQuery i może ulec zmianie w przyszłych wydaniach. Niestety nie znam innych łatwych sposobów uzyskania dostępu do wydarzeń.

1: Prototype.observeużywa Element.addEventListener (zobacz kod źródłowy )

2: Możesz przesłonić, Element.addEventListeneraby zapamiętać dodane detektory (przydatna właściwość EventListenerListzostała usunięta z propozycji specyfikacji DOM3). Uruchom ten kod przed dołączeniem jakiegokolwiek zdarzenia:

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    this._addEventListener(a,b,c);
    if(!this.eventListenerList) this.eventListenerList = {};
    if(!this.eventListenerList[a]) this.eventListenerList[a] = [];
    this.eventListenerList[a].push(b);
  };
})();

Przeczytaj wszystkie wydarzenia według:

var clicks = someElement.eventListenerList.click;
if(clicks) clicks.forEach(function(f) {
  alert("I listen to this function: "+f.toString());
});

I nie zapomnij zastąpić, Element.removeEventListeneraby usunąć zdarzenie z niestandardowego Element.eventListenerList.

3: Element.onclicknieruchomość wymaga tutaj szczególnej opieki:

if(someElement.onclick)
  alert("I also listen tho this: "+someElement.onclick.toString());

4: nie zapomnij Element.onclickatrybutu content: są to dwie różne rzeczy:

someElement.onclick = someHandler; // IDL attribute
someElement.setAttribute("onclick","otherHandler(event)"); // content attribute

Musisz więc sobie z tym poradzić:

var click = someElement.getAttribute("onclick");
if(click) alert("I even listen to this: "+click);

Bookmarklet zdarzenia wizualnego (wspomniany w najpopularniejszej odpowiedzi) kradnie tylko pamięć podręczną procedury obsługi bibliotek:

Okazuje się, że nie ma standardowej metody zapewnianej przez zalecany przez W3C interfejs DOM, aby dowiedzieć się, jakie detektory zdarzeń są dołączone do konkretnego elementu. Chociaż może się to wydawać niedopatrzeniem, pojawiła się propozycja włączenia właściwości o nazwie eventListenerList do specyfikacji DOM poziomu 3, ale niestety została ona usunięta w późniejszych wersjach roboczych. W związku z tym jesteśmy zmuszeni przyjrzeć się poszczególnym bibliotekom JavaScript, które zazwyczaj przechowują pamięć podręczną dołączonych zdarzeń (aby można je później usunąć i wykonać inne przydatne abstrakty).

Jako taki, aby Visual Event mógł wyświetlać zdarzenia, musi być w stanie parsować informacje o zdarzeniu z biblioteki JavaScript.

Przesłanianie elementów może być wątpliwe (np. Ponieważ istnieją pewne funkcje specyficzne dla DOM, takie jak kolekcje na żywo, których nie można zakodować w JS), ale daje natywną obsługę eventListenerList i działa w Chrome, Firefox i Opera (nie działa w IE7 ).

Możesz owinąć natywne metody DOM do zarządzania detektorami zdarzeń, umieszczając to na górze <head>:

<script>
    (function(w){
        var originalAdd = w.addEventListener;
        w.addEventListener = function(){
            // add your own stuff here to debug
            return originalAdd.apply(this, arguments);
        };

        var originalRemove = w.removeEventListener;
        w.removeEventListener = function(){
            // add your own stuff here to debug
            return originalRemove.apply(this, arguments);
        };
    })(window);
</script>

H / T @ les2

Narzędzia programistyczne Firefoksa teraz to robią. Zdarzenia są wyświetlane po kliknięciu przycisku „ev” po prawej stronie wyświetlacza każdego elementu, w tym zdarzenia jQuery i DOM .

Jeśli masz Firebug , możesz użyć console.dir(object or array)do wydrukowania ładnego drzewa w dzienniku konsoli dowolnego skalaru JavaScript, tablicy lub obiektu.

Próbować:

console.dir(clickEvents);

lub

console.dir(window);

W pełni działające rozwiązanie oparte na odpowiedzi Jana Turona - zachowuje się jak getEventListeners()z konsoli:

(Jest mały błąd z duplikatami. I tak niewiele się psuje.)

(function() {
  Element.prototype._addEventListener = Element.prototype.addEventListener;
  Element.prototype.addEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._addEventListener(a,b,c);
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(!this.eventListenerList[a])
      this.eventListenerList[a] = [];
    //this.removeEventListener(a,b,c); // TODO - handle duplicates..
    this.eventListenerList[a].push({listener:b,useCapture:c});
  };

  Element.prototype.getEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined)
      return this.eventListenerList;
    return this.eventListenerList[a];
  };
  Element.prototype.clearEventListeners = function(a){
    if(!this.eventListenerList)
      this.eventListenerList = {};
    if(a==undefined){
      for(var x in (this.getEventListeners())) this.clearEventListeners(x);
        return;
    }
    var el = this.getEventListeners(a);
    if(el==undefined)
      return;
    for(var i = el.length - 1; i >= 0; --i) {
      var ev = el[i];
      this.removeEventListener(a, ev.listener, ev.useCapture);
    }
  };

  Element.prototype._removeEventListener = Element.prototype.removeEventListener;
  Element.prototype.removeEventListener = function(a,b,c) {
    if(c==undefined)
      c=false;
    this._removeEventListener(a,b,c);
      if(!this.eventListenerList)
        this.eventListenerList = {};
      if(!this.eventListenerList[a])
        this.eventListenerList[a] = [];

      // Find the event in the list
      for(var i=0;i<this.eventListenerList[a].length;i++){
          if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
              this.eventListenerList[a].splice(i, 1);
              break;
          }
      }
    if(this.eventListenerList[a].length==0)
      delete this.eventListenerList[a];
  };
})();

Stosowanie:

someElement.getEventListeners([name]) - zwraca listę detektorów zdarzeń, jeśli nazwa jest ustawiona, zwraca tablicę detektorów dla tego zdarzenia

someElement.clearEventListeners([name]) - usuń wszystkie detektory zdarzeń, jeśli nazwa jest ustawiona, usuń tylko detektory tego zdarzenia

Opera 12 (nie najnowszy silnik Chrome Webkit) Dragonfly ma to od dłuższego czasu i jest oczywiście wyświetlane w strukturze DOM. Moim zdaniem jest to doskonały debugger i jest to jedyny powód, dla którego nadal używam wersji Opery 12 (nie ma wersji v13, v14, a wersja v15 Webkit wciąż nie ma Dragonfly)

Prototypowy sposób 1.7.1

function get_element_registry(element) {
    var cache = Event.cache;
    if(element === window) return 0;
    if(typeof element._prototypeUID === 'undefined') {
        element._prototypeUID = Element.Storage.UID++;
    }
    var uid =  element._prototypeUID;           
    if(!cache[uid]) cache[uid] = {element: element};
    return cache[uid];
}

Ostatnio pracowałem z wydarzeniami i chciałem wyświetlić / kontrolować wszystkie zdarzenia na stronie. Po przeanalizowaniu możliwych rozwiązań postanowiłem pójść własną drogą i stworzyć niestandardowy system monitorowania zdarzeń. Zrobiłem więc trzy rzeczy.

Po pierwsze potrzebowałem kontenera dla wszystkich detektorów zdarzeń na stronie: to jest EventListenersobiekt. Ma trzy użyteczne metody: add(), remove(), i get().

Następnie stworzyłem EventListenerobiekt do przechowywania informacji niezbędnych do zdarzenia, czyli: target, type, callback, options, useCapture, wantsUntrusted, i dodaje metodę remove()usuwania słuchacza.

Na koniec rozszerzyłem język macierzysty addEventListener()i removeEventListener()metody, aby działały z obiektami, które utworzyłem ( EventListeneri EventListeners).

Stosowanie:

var bodyClickEvent = document.body.addEventListener("click", function () {
    console.log("body click");
});

// bodyClickEvent.remove();

addEventListener()tworzy EventListenerobiekt, dodaje go EventListenersi zwraca EventListenerobiekt, aby można go było później usunąć.

EventListeners.get()można użyć do wyświetlenia słuchaczy na stronie. Akceptuje EventTargetciąg lub ciąg znaków (typ zdarzenia).

// EventListeners.get(document.body);
// EventListeners.get("click");

Próbny

Powiedzmy, że chcemy poznać każdego detektora zdarzeń na bieżącej stronie. Możemy to zrobić (zakładając, że używasz rozszerzenia menedżera skryptów, w tym przypadku Tampermonkey). Następujący skrypt to robi:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      https://stackoverflow.com/*
// @grant        none
// ==/UserScript==

(function() {
    fetch("https://raw.githubusercontent.com/akinuri/js-lib/master/EventListener.js")
        .then(function (response) {
            return response.text();
        })
        .then(function (text) {
            eval(text);
            window.EventListeners = EventListeners;
        });
})(window);

A kiedy podajemy listę wszystkich słuchaczy, mówi się, że jest 299 słuchaczy zdarzeń. „Wydaje się”, że są jakieś duplikaty, ale nie wiem, czy naprawdę są duplikatami. Nie każdy typ zdarzenia jest duplikowany, więc wszystkie te „duplikaty” mogą być pojedynczymi detektorami.

Kod można znaleźć w moim repozytorium. Nie chciałem go tutaj zamieszczać, ponieważ jest raczej długi.

Aktualizacja: Wydaje się, że to nie działa z jQuery. Kiedy badam EventListener, widzę, że jest to wywołanie zwrotne

function(b){return"undefined"!=typeof r&&r.event.triggered!==b.type?r.event.dispatch.apply(a,arguments):void 0}

Uważam, że należy to do jQuery i nie jest rzeczywistym wywołaniem zwrotnym. jQuery przechowuje rzeczywiste wywołanie zwrotne we właściwościach EventTarget:

$(document.body).click(function () {
    console.log("jquery click");
});

Aby usunąć detektor zdarzeń, faktyczne wywołanie zwrotne musi zostać przekazane do removeEventListener()metody. Aby więc działał z jQuery, wymaga dalszych modyfikacji. Mogę to naprawić w przyszłości.

Próbuję to zrobić w jQuery 2.1, a $().click() -> $(element).data("events").click;metoda „ ” nie działa.

Zrozumiałem, że w moim przypadku działają tylko funkcje $ ._ data ():

	$(document).ready(function(){

		var node = $('body');
		
        // Bind 3 events to body click
		node.click(function(e) { alert('hello');  })
			.click(function(e) { alert('bye');  })
			.click(fun_1);

        // Inspect the events of body
		var events = $._data(node[0], "events").click;
		var ev1 = events[0].handler // -> function(e) { alert('hello')
		var ev2 = events[1].handler // -> function(e) { alert('bye')
		var ev3 = events[2].handler // -> function fun_1()
        
		$('body')
			.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
			.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
			.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');        
	
	});

	function fun_1() {
		var txt = 'text del missatge';	 
		alert(txt);
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
</body>

Istnieje ładne rozszerzenie jQuery Events :

( źródło tematu )

zmiana tych funkcji pozwoli ci zalogować dodane nasłuchiwania:

EventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent

przeczytaj resztę słuchaczy

console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));