Hata ayıklama sırasında veya JavaScript kodundan DOM düğümünde olay dinleyicileri nasıl bulunur?

Bazı olay dinleyicilerinin giriş kutularına ve seçim kutularına eklendiği bir sayfam var. Hangi olay dinleyicilerinin belirli bir DOM düğümünü ve hangi olay için gözlemlediğini bulmanın bir yolu var mı?

Olaylar aşağıdakiler kullanılarak eklenir:

1. Prototipler Event.observe ;
2. DOM'lar addEventListener;
3. Öğe niteliği olarak element.onclick.

Bir sayfada neler olup bittiğini incelemeniz gerekiyorsa, Görsel Etkinlik yer işareti uygulamasını deneyebilirsiniz .

Güncelleme : Visual Event 2 mevcut.

Olayların nasıl eklendiğine bağlıdır. Çizim varsayımı için aşağıdaki tıklama işleyicimiz var:

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

Bunu, bazıları incelemeye izin veren ve bazıları yapmayan farklı yöntemler kullanarak elementimize ekleyeceğiz.

Yöntem A) tek olay işleyici

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

Yöntem B) çoklu olay işleyicileri

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

Yöntem 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 (işleyiciyi bir nesnenin içinde saklar)

  // 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
  })

^{(Bkz. jQuery.fn.dataVe jQuery.data)}

Yöntem D): Prototip (dağınık)

$(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 - 1.6.0.3 (dahil) (burada çok zorlaştı)

  // 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 (biraz daha iyi)

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

Chrome, Firefox, Vivaldi ve Safari desteği getEventListeners(domElement)Geliştirici Araçları konsolunda .

Hata ayıklama amaçlarının çoğu için bu kullanılabilir.

Kullanmak için çok iyi bir referans aşağıdadır: https://developers.google.com/web/tools/chrome-devtools/console/utilities#geteventlisteners

Chrome veya Safari tarayıcılarındaki WebKit Inspector artık bunu yapıyor. Öğeler bölmesinde bir DOM öğesini seçtiğinizde olay dinleyicilerini görüntüler.

Tüm olay dinleyicilerini JavaScript'te listelemek mümkündür : O kadar da zor değil; prototypeHTML öğelerinin yöntemini ( dinleyicileri eklemeden önce ) hacklemeniz yeterlidir .

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

Artık her bağlantı elemanı ( a) lastListenerInfotüm dinleyicilerini içeren bir özelliğe sahip olacaktır . Hatta anonim işlevlere sahip dinleyicileri kaldırmak için bile çalışır.

Google Chrome'da getEventListeners kullanın :

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

( Bu sorunun cevabını burada alakalı olduğu için yeniden yazınız .)

Hata ayıklama sırasında, sadece olayları görmek istiyorsanız, ben de ...

1. Görsel Etkinlik
2. Elemanları Chrome'un Geliştirici Araçları bölümünde: (Firefox'ta benzeri) sağ alt bölümündeki "Etkinlik İşleyicilere" için bir öğe ve göz seçmek

Kodunuzdaki olayları kullanmak istiyorsanız ve 1.8 sürümünden önce jQuery kullanıyorsanız şunları kullanabilirsiniz:

$(selector).data("events")

olayları almak için. 1.8 sürümünden itibaren .data ("events") kullanılmasına son verildi ( bu hata biletine bakın ). Kullanabilirsiniz:

$._data(element, "events")

Başka bir örnek: Tüm tıklama etkinliklerini konsolun belirli bir bağlantısına yazın:

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

( çalışan bir örnek için bkz. http://jsfiddle.net/HmsQC/ )

Ne yazık ki, $ ._ verileri kullanılarak bu, dahili bir jQuery yapısı olduğu ve gelecekteki sürümlerde değişebileceği için hata ayıklama dışında önerilmez . Maalesef, olaylara erişmenin başka kolay bir yolunu bilmiyorum.

1: Prototype.observeElement.addEventListener kullanır ( kaynak koduna bakın) )

2: Element.addEventListenerEklenen dinleyicileri hatırlamak için geçersiz kılabilirsiniz (kullanışlı özellik EventListenerListDOM3 spesifikasyon teklifinden kaldırılmıştır). Herhangi bir etkinlik eklenmeden önce bu kodu çalıştırın:

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

Tüm etkinlikleri şu şekilde okuyun:

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

Element.removeEventListenerEtkinliği özel durumdan kaldırmak için geçersiz kılmayı unutmayınElement.eventListenerList .

3: Element.onclickmülkiyet burada özel bir bakıma ihtiyaç duyar:

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

4: Element.onclickiçerik özelliğini unutmayın : bunlar iki farklı şeydir:

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

Yani onunla da başa çıkmalısın:

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

Görsel Olay yer işareti (en popüler yanıtta belirtilir) yalnızca özel kitaplık işleyici önbelleğini çalar:

Belirli bir öğeye hangi olay dinleyicilerinin eklendiğini bulmak için W3C tarafından önerilen DOM arabirimi tarafından sağlanan standart bir yöntem olmadığı ortaya çıkıyor. Bu bir gözetim gibi görünse de, eventListenerList adlı bir özelliği 3. düzey DOM spesifikasyonuna dahil etmek için bir teklif vardı, ancak maalesef sonraki taslaklarda kaldırıldı. Bu nedenle, genellikle ekli olayların bir önbelleğini tutan bireysel Javascript kütüphanelerine bakmaya zorlanırız (böylece daha sonra kaldırılabilir ve diğer yararlı soyutlamaları gerçekleştirebilirler).

Bu nedenle, Visual Event'in olayları göstermesi için, olay bilgilerini bir Javascript kütüphanesinden ayrıştırabilmesi gerekir.

Öğe geçersiz kılma sorgulanabilir (yani, canlı koleksiyonlar gibi JS'de kodlanamayan DOM'a özgü bazı özellikler olduğu için), ancak eventListenerList'e yerel olarak destek verir ve Chrome, Firefox ve Opera'da çalışır (IE7'de çalışmaz ).

Olay dinleyicilerini yönetmek için yerel DOM yöntemlerini aşağıdakilerin üstüne koyarak sarabilirsiniz <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

Firefox geliştirici araçları şimdi bunu yapıyor. Olaylar, jQuery ve DOM olayları dahil olmak üzere her bir öğenin ekranının sağındaki "ev" düğmesine tıklanarak gösterilir .

Eğer varsa Firebug'ınızconsole.dir(object or array) , herhangi bir JavaScript skaleri, dizisi veya nesnesinin konsol günlüğüne güzel bir ağaç yazdırmak için kullanabilirsiniz .

Deneyin:

console.dir(clickEvents);

veya

console.dir(window);

Jan Turon'un cevabına dayanan tam çalışma çözümü - getEventListeners()konsoldan gibi davranır :

(Yinelemelerde küçük bir hata var. Yine de çok fazla kırılmaz.)

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

Kullanımı:

someElement.getEventListeners([name]) - ad ayarlanırsa, olay dinleyicilerinin dönüş listesi, söz konusu olay için dinleyicilerin dönüş dizisi

someElement.clearEventListeners([name]) - ad ayarlanmışsa tüm olay dinleyicilerini kaldır, yalnızca o etkinlik için dinleyicileri kaldır

Opera 12 (en son Chrome Webkit motoru tabanlı değil) Dragonfly bir süredir bunu yapıyor ve açıkça DOM yapısında görüntüleniyor. Bence üstün bir hata ayıklayıcı ve hala Opera 12 tabanlı sürümünü kullanmamın tek nedeni (v13, v14 sürümü yok ve v15 Webkit tabanlı Dragonfly hala yok)

Prototip 1.7.1 yol

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];
}

Son zamanlarda etkinliklerle çalışıyordum ve bir sayfadaki tüm etkinlikleri görüntülemek / kontrol etmek istedim. Olası çözümlere baktığımda, kendi yoluma gitmeye ve olayları izlemek için özel bir sistem oluşturmaya karar verdim. Üç şey yaptım.

İlk olarak, sayfadaki tüm olay dinleyicileri için bir kapsayıcıya ihtiyacım vardı: EventListenersnesne bu. Üç kullanışlı yöntemler vardır: add(), remove(), ve get().

Sonra, ben bir oluşturulan EventListeneretkinlik için gerekli bilgileri tutmak için nesneyi, yani: target, type, callback, options, useCapture, wantsUntrusted, ve bir yöntem eklendiremove() dinleyici kaldırmak için.

Son olarak, yarattığım ( ve ) nesnelerle çalışmasını sağlamak için yerel addEventListener()ve removeEventListener()yöntemleri genişlettim .EventListenerEventListeners

Kullanımı:

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

// bodyClickEvent.remove();

addEventListener()bir EventListenernesne oluşturur, nesneyi ekler EventListenersve EventListenernesneyi döndürür , böylece daha sonra kaldırılabilir.

EventListeners.get()sayfadaki dinleyicileri görüntülemek için kullanılabilir. Bir EventTargetveya bir dize (olay türü) kabul eder .

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

gösteri

Diyelim ki bu sayfadaki her olay dinleyicisini bilmek istiyoruz. Bunu yapabiliriz (bu durumda Tampermonkey bir komut dosyası yöneticisi uzantısı kullandığınızı varsayarak). Aşağıdaki komut dosyası bunu yapar:

// ==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);

Ve tüm dinleyicileri listelediğimizde, 299 olay dinleyicisi olduğunu söylüyor. Bazı kopyalar "görünüyor", ama gerçekten kopya olup olmadıklarını bilmiyorum. Her olay türü çoğaltılmaz, bu nedenle tüm bu "kopyalar" ayrı bir dinleyici olabilir.

Kod depomda bulunabilir. Buraya göndermek istemedim çünkü oldukça uzun.

Güncelleme: Bu jQuery ile çalışmıyor gibi görünüyor. EventListener'ı incelediğimde geri aramanın

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

Bunun jQuery'ye ait olduğuna ve gerçek geri arama olmadığına inanıyorum. jQuery, gerçek geri aramayı EventTarget öğesinin özelliklerinde depolar:

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

Bir olay dinleyicisini kaldırmak için, gerçek geri aramanın removeEventListener()yönteme iletilmesi gerekir . Yani bu jQuery ile çalışmak için, daha fazla değişiklik gerekiyor. Bunu gelecekte düzeltebilirim.

Bunu jQuery 2.1'de yapmaya çalışıyorum ve " $().click() -> $(element).data("events").click;" yöntemiyle çalışmıyor.

Benim durumumda sadece $ ._ data () fonksiyonlarının çalıştığını fark ettim:

	$(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>

Güzel jQuery Events uzantısı var :

(konu kaynağı )

bu işlevleri değiştirmek, eklenen dinleyicileri günlüğe kaydetmenize olanak tanır:

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

dinleyicilerin geri kalanını

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