Periksa penangan peristiwa terlampir untuk setiap elemen DOM

Apakah ada cara untuk melihat fungsi / kode apa yang dilampirkan ke acara apa pun untuk elemen DOM? Menggunakan Firebug atau alat lainnya.

Penangan peristiwa yang dilampirkan menggunakan tradisional element.onclick= handleratau HTML <element onclick="handler">dapat diambil dengan mudah dari element.onclickproperti dari skrip atau dalam-debugger.

Penangan peristiwa yang dilampirkan menggunakan addEventListenermetode Peristiwa Tingkat 2 DOM dan IE attachEventsaat ini tidak dapat diambil dari skrip sama sekali. DOM Level 3 pernah diusulkan element.eventListenerListuntuk mendapatkan semua pendengar, tetapi tidak jelas apakah ini akan mencapai spesifikasi akhir. Tidak ada implementasi di browser mana pun saat ini.

Alat debugging sebagai ekstensi browser bisa mendapatkan akses ke jenis pendengar ini, tetapi saya tidak mengetahui apa pun yang sebenarnya melakukannya.

Beberapa kerangka kerja JS menyisakan cukup banyak rekaman peristiwa yang mengikat untuk mengetahui apa yang telah mereka lakukan. Peristiwa Visual mengambil pendekatan ini untuk menemukan pendengar yang terdaftar melalui beberapa kerangka kerja populer.

The Elements Panel di alat Pengembang Google Chrome telah memiliki ini sejak rilis Chrome pada pertengahan 2011 dan Chrome pengembang saluran rilis sejak tahun 2010.

Selain itu, event listener yang ditampilkan untuk node yang dipilih berada dalam urutan saat mereka diaktifkan melalui fase capture dan bubble.

Tekan command+ option+ idi Mac OSX dan Ctrl+ Shift+ idi Windows untuk menjalankannya di Chrome

Alat Pengembang Chrome baru-baru ini mengumumkan beberapa alat baru untuk Memantau Peristiwa JavaScript .

TL; DR

Dengarkan acara dari jenis tertentu menggunakan monitorEvents().

Gunakan unmonitorEvents()untuk berhenti mendengarkan.

Dapatkan listener elemen DOM menggunakan getEventListeners().

Gunakan panel Event Listeners Inspector untuk mendapatkan informasi tentang event listener.

Menemukan Peristiwa Kustom

Untuk kebutuhan saya, menemukan peristiwa JS kustom dalam kode pihak ketiga, dua versi berikut getEventListeners()ini sangat membantu;

• getEventListeners(window)
• getEventListeners(document)

Jika Anda tahu apa Node DOM yang dilampirkan event listener, Anda akan meneruskannya, bukan windowatau document.

Acara yang Diketahui

Jika Anda tahu apa acara yang Anda ingin memantau misalnya clickpada tubuh dokumen Anda bisa menggunakan berikut: monitorEvents(document.body, 'click');.

Anda sekarang harus mulai melihat semua peristiwa klik saat document.bodylogin di konsol.

Anda bisa melihat kejadian yang dilampirkan secara langsung (element.onclick = handler) dengan melihat DOM. Anda dapat melihat acara yang terpasang dengan jQuery di Firefox menggunakan FireBug dengan FireQuery. Tampaknya tidak ada cara untuk melihat peristiwa yang ditambahkan addEventListener menggunakan FireBug. Namun, Anda dapat melihatnya di Chrome menggunakan debugger Chrome.

Anda dapat menggunakan Visual Event oleh Allan Jardine untuk memeriksa semua penangan kejadian yang saat ini dilampirkan dari beberapa perpustakaan JavaScript utama di halaman Anda. Ia bekerja dengan jQuery, YUI dan beberapa lainnya.

Visual Event adalah bookmarklet JavaScript sehingga kompatibel dengan semua browser utama.

Anda dapat memperluas lingkungan javascript untuk melacak event listener. Gabungkan (atau 'overload') metode addEventListener () native dengan beberapa kode yang dapat menyimpan catatan event listener yang ditambahkan sejak saat itu . Anda juga harus memperluas HTMLElement.prototype.removeEventListener untuk menyimpan catatan yang secara akurat mencerminkan apa yang terjadi di DOM.

Hanya untuk ilustrasi (kode yang belum teruji) - ini adalah contoh bagaimana Anda akan 'membungkus' addEventListener untuk memiliki catatan event listener terdaftar pada objek itu sendiri:

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