Bagaimana cara melihat acara yang dipecat pada suatu elemen di Chrome DevTools?

Saya memiliki elemen formulir yang dapat disesuaikan pada halaman dari perpustakaan. Saya ingin melihat peristiwa javascript apa yang dipicu ketika saya berinteraksi dengannya karena saya mencoba mencari tahu event handler mana yang akan digunakan.

Bagaimana saya melakukannya menggunakan Pengembang Web Chrome?

• Tekan F12untuk membuka Dev Tools
• Klik tab Sumber
• Di sisi kanan, gulir ke bawah ke "Breakpoint Pendengar Acara", dan rentangkan pohon
• Klik pada acara yang ingin Anda dengarkan.
• Berinteraksi dengan elemen target, jika mereka menembak Anda akan mendapatkan break point di debugger

Demikian pula, Anda dapat mengklik kanan pada elemen target -> pilih "inspect element" Gulir ke bawah di sisi kanan bingkai dev, di bagian bawah adalah 'pendengar acara'. Rentangkan pohon untuk melihat acara apa yang dilampirkan ke elemen. Tidak yakin apakah ini berfungsi untuk acara yang ditangani melalui gelembung (saya kira tidak)

Anda dapat menggunakan fungsi monitorEvents .

Cukup periksa elemen Anda ( right mouse click→ Inspectpada elemen yang terlihat atau buka Elementstab di Alat Pengembang Chrome dan pilih elemen yang diinginkan) lalu buka Consoletab dan tulis:

monitorEvents($0)

Sekarang ketika Anda memindahkan mouse ke elemen ini, fokus atau klik, nama peristiwa yang dipecat akan ditampilkan dengan datanya.

Untuk berhenti mendapatkan data ini, cukup tulis ini ke konsol:

unmonitorEvents($0)

$0hanyalah elemen DOM terakhir yang dipilih oleh Alat Pengembang Chrome. Anda dapat melewati objek DOM lain di sana (misalnya hasil getElementByIdatau querySelector).

Anda juga dapat menentukan "tipe" acara sebagai parameter kedua untuk mempersempit acara yang dipantau ke beberapa set yang telah ditentukan. Sebagai contoh:

monitorEvents(document.body, 'mouse')

Daftar jenis yang tersedia ini ada di sini .

Saya membuat gif kecil yang menggambarkan cara kerja fitur ini:

Acara Visual adalah bookmarklet kecil yang bagus yang dapat Anda gunakan untuk melihat penangan acara elemen. Demo online dapat dilihat di sini .

Untuk jQuery (setidaknya versi 1.11.2) prosedur berikut ini berfungsi untuk saya.

1. Klik kanan pada elemen dan buka 'Alat Pengembang Chrome'
2. Ketik $._data(($0), 'events');'Konsol'
3. Buka objek terlampir dan klik dua kali handler:nilainya.
4. Ini menunjukkan kode sumber fungsi terlampir, cari bagian yang menggunakan tab 'Cari'.

Dan inilah saatnya untuk berhenti menciptakan kembali roda dan mulai menggunakan acara vanilla JS ... :)

Ini tidak akan menampilkan acara khusus seperti yang mungkin dibuat skrip Anda jika itu adalah plugin jquery. sebagai contoh :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Panel Acara di bawah Skrip dalam alat pengembang krom tidak akan menampilkan "Sesuatu: custom-event-one"