Bagaimanakah Saya Boleh Menggunakan Chrome DevTools untuk Melihat Acara yang Dicetuskan pada Elemen?

Melihat Acara Dicetuskan pada Elemen dengan Chrome DevTools

Untuk menyelesaikan masalah dan mengoptimumkan pengendalian acara pada halaman web anda, anda boleh menggunakan Chrome DevTools untuk memeriksa peristiwa yang dicetuskan pada elemen tertentu.

Laksanakan langkah berikut menggunakan Pembangun Web Chrome:

1. Periksa Elemen:

   • Klik kanan pada elemen sasaran dan pilih "Periksa" atau navigasi ke tab "Elemen" dalam DevTools.

2. Pantau Acara:

   • Menggunakan monitorEvents:

     • Buka tab "Console".
     • Masukkan monitorEvents($0) dalam konsol, dengan $0 mewakili elemen yang dipilih.

   • Menentukan Jenis Acara:

     • Secara pilihan, berikan jenis acara anda ingin memantau sebagai hujah kedua kepada monitorEvents, cth., monitorEvents(document.body, 'mouse').

Interaksi dengan elemen yang diperiksa akan kini memaparkan nama acara mereka dan data yang berkaitan.

3. Hentikan Pemantauan:

   • Untuk menghentikan pemantauan acara, masukkan unmonitorEvents($0) dalam konsol.

Jenis Acara yang Tersedia (sehingga 30-01-2023)

Anda boleh mengecilkan acara yang dipantau dengan menentukan jenis berikut:

• tetikus: acara tetikus (bawah, atas, klik, dll.)
• kunci: acara papan kekunci ( bawah, atas, tekan, dsb.)
• sentuh: peristiwa sentuh (mula, bergerak, tamat, dsb.)
• kawalan: elemen mengawal peristiwa (saiz semula, fokus, tukar, dll.)

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Chrome DevTools untuk Melihat Acara yang Dicetuskan pada Elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!