Herhangi bir DOM öğesi için ekli olay işleyicilerini inceleyin

Bir DOM öğesi için herhangi bir olaya hangi işlevlerin / kodların eklendiğini görmenin herhangi bir yolu var mı? Firebug veya başka bir araç kullanarak.

Geleneksel element.onclick= handlerveya HTML kullanılarak eklenen olay işleyicileri , komut dosyasından veya hata ayıklayıcıdan özellikten <element onclick="handler">önemsiz bir şekilde alınabilir element.onclick.

DOM Düzey 2 Olayları addEventListeneryöntemleri kullanılarak eklenen olay işleyicileri ve IE'ler attachEventşu anda komut dosyasından hiç alınamıyor. DOM Seviye 3 bir zamanlar element.eventListenerListtüm dinleyicileri almak için önerildi , ancak bunun nihai spesifikasyona uyup uymayacağı açık değil. Bugün hiçbir tarayıcıda uygulama yoktur.

Tarayıcı uzantısı olarak bir ayıklama aracı olabilir dinleyici bu tür erişmek, ama aslında yapmak herhangi farkında değilim.

Bazı JS çerçeveleri, neler yaptıklarını hesaplamak için yeterince olay bağlama kaydı bırakır. Visual Event , birkaç popüler çerçeveyle kaydedilen dinleyicileri keşfetmek için bu yaklaşımı kullanır.

Google Chrome Geliştirici araçları Elemanları Paneli 2010 yılından beri ortalarında 2011 ve Chrome geliştirici kanalı sürüm Chrome bültenleri beri bu olmuştur.

Ayrıca, seçilen düğüm için gösterilen olay dinleyicileri , yakalama ve köpürme aşamaları boyunca tetiklendikleri sıradadır.

Hit command+ option+ iMac OSX ve Ctrl+ Shift+ iWindows Chrome'da bu ateşlemek

Chrome Dev Tools, kısa süre önce JavaScript Etkinliklerini İzleme için bazı yeni araçları duyurdu .

TL; DR

Kullanarak belirli bir türdeki olayları dinleyin monitorEvents().

unmonitorEvents()Dinlemeyi durdurmak için kullanın .

Kullanarak bir DOM öğesinin dinleyicilerini edinin getEventListeners().

Olay dinleyicileri hakkında bilgi almak için Olay Dinleyicileri Denetçisi panelini kullanın.

Özel Olayları Bulma

İhtiyacım için, 3. taraf kodunda özel JS olaylarını keşfetmek, aşağıdaki iki sürüm getEventListeners()inanılmaz derecede yardımcı oldu;

• getEventListeners(window)
• getEventListeners(document)

Olay dinleyicisinin hangi DOM Düğümüne eklendiğini biliyorsanız, bunu windowveya yerine iletmelisiniz document.

Bilinen Olay

Eğer örneğin izlemek isteyen hangi etkinlik biliyorsanız clickbelge gövdesi üzerinde aşağıdakileri kullanabilirsiniz: monitorEvents(document.body, 'click');.

Artık document.bodykonsolda oturum açıldığında tüm tıklama olaylarını görmeye başlamalısınız .

DOM'a bakarak doğrudan eklenmiş etkinlikleri (element.onclick = handler) görüntüleyebilirsiniz. Firefox'ta, FireQuery ile FireBug kullanarak jQuery'ye bağlı olayları görüntüleyebilirsiniz. FireBug kullanarak addEventListener tarafından eklenen olayları görmenin herhangi bir yolu yok gibi görünüyor. Ancak, bunları Chrome hata ayıklayıcıyı kullanarak Chrome'da görebilirsiniz.

Sen kullanabilirsiniz Görsel Olay sayfanızda birkaç büyük bir JavaScript kütüphanelerinden olan tüm ekli olay işleyicileri incelemek için Allan Jardine tarafından. JQuery, YUI ve diğerleri ile çalışır.

Görsel Etkinlik bir JavaScript yer imi olduğundan tüm büyük tarayıcılarla uyumludur.

Olay dinleyicilerini takip etmek için javascript ortamınızı genişletebilirsiniz. Yerel addEventListener () yöntemini , o andan itibaren eklenen herhangi bir olay dinleyicisinin kaydını tutabilecek bir kodla sarın (veya 'aşırı yük') . DOM'da olup biteni doğru şekilde yansıtan kayıtları tutmak için HTMLElement.prototype.removeEventListener'ı da genişletmeniz gerekir.

Sadece örnekleme amacıyla (test edilmemiş kod) - bu, addEventListener'ı kayıtlı olay dinleyicilerinin kayıtlarını nesnenin kendisinde bulundurmak için nasıl 'saracağınıza' bir örnektir:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}