Hata ayıklarken veya JavaScript kodundan bir DOM düğümündeki olay dinleyicileri nasıl bulunur?

Sadece bir sayfada neler olup bittiğini incelemeniz gerekiyorsa, Visual Event yer işaretini deneyebilirsiniz.

Güncelleme: Görsel Etkinlik 2 mevcut;

Bu, olayların nasıl bağlandığına bağlıdır. Örnek olarak aşağıdaki tıklama işleyicisine sahip olduğumuzu varsayalım:

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

Bazıları denetime izin veren, bazıları da izin vermeyen farklı yöntemler kullanarak bunu elemanımıza 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

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

   // incelemek
   var clickEvents = $(element).data("events").click;
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
       // ayrıca kullanılabilir: handlerObj.type, handlerObj.namespace
   })

(Bkz. jQuery.fn.data ve jQuery.data)

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

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

• 1.5.x

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

• 1.6 ila 1.6.0.3, dahil (burada çok zorlandım)

   // inceleyin. "_eventId" < 1.6.0.3 içindir while
   // "_prototypeEventID" 1.6.0.3'te tanıtıldı
   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)

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

Firebug]1'a sahipseniz, herhangi bir JavaScript skalerinin, dizisinin veya nesnesinin konsol günlüğüne güzel bir ağaç yazdırmak için console.dir(object or array) kullanabilirsiniz.

Dene:

console.dir(clickEvents);

veya

console.dir(window);