Bagaimanakah saya boleh menggunakan Chrome DevTools untuk memantau acara tertentu yang dicetuskan pada elemen halaman web?

Memantau Acara dalam Chrome DevTools

Anda boleh memantau acara yang dicetuskan pada mana-mana elemen menggunakan Pembangun Web Chrome dengan memanfaatkan fungsi monitorEvents yang berkuasa. Begini caranya:

1. Periksa Elemen Sasaran: Klik kanan pada elemen yang dikehendaki dan pilih "Periksa" atau pergi ke tab "Unsur" dan pilihnya.
2. Akses Konsol: Navigasi ke tab "Console" dalam Alat Pembangun Chrome.

3. Ajak monitorEvents: Taip arahan berikut ke dalam konsol :

   monitorEvents(<pre class="brush:php;toolbar:false">unmonitorEvents(<pre class="brush:php;toolbar:false">monitorEvents(document.body, 'mouse')

   ))

   di mana $0 mewakili elemen DOM yang dipilih.

4. Perhatikan Data Peristiwa: Berinteraksi dengan elemen (cth., tetikus ke atas, fokus, klik ) dan saksikan nama acara yang dipaparkan dan data berkaitannya.

Untuk menghentikan pemantauan acara, hanya masukkan arahan berikut:

Sebagai alternatif, anda boleh menentukan jenis acara sebagai parameter kedua untuk menapis peristiwa yang dipantau. Contohnya:

akan mengehadkan pemantauan kepada acara berkaitan tetikus. Senarai jenis acara yang tersedia termasuk:

• tetikus: tetikus turun, tetikus ke atas, klik, dblclick, tetikus alih, tetikus, tetikus keluar, tetikus
• kunci : keydown, keyup, tekan kekunci, textInput
• touch: touchstart, touchmove, touchend, touch cancel
• control: ubah saiz, tatal, zum, fokus, kabur, pilih, tukar, serahkan, tetapkan semula

GIF yang digambarkan di bawah menunjukkan penggunaan fungsi monitorEvents:

[Imej GIF yang menunjukkan penggunaan fungsi monitorEvents ]

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan Chrome DevTools untuk memantau acara tertentu yang dicetuskan pada elemen halaman web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!