Wie kann ich Chrome DevTools verwenden, um auf Elementen ausgelöste Ereignisse anzuzeigen?

Auf Elements ausgelöste Ereignisse mit Chrome DevTools anzeigen

Zur Fehlerbehebung und Optimierung der Ereignisbehandlung auf Ihren Webseiten können Sie Chrome DevTools zur Inspektion verwenden die Ereignisse, die bei bestimmten Elementen ausgelöst werden.

Führen Sie die folgenden Schritte mit Chrome Web Developer aus:

1. Inspizieren Sie das Element:

   • Klicken Sie mit der rechten Maustaste auf das Zielelement und wählen Sie „Inspizieren“ oder navigieren Sie zur Registerkarte „Elemente“ in DevTools.

2. Ereignisse überwachen:

   • MonitorEvents verwenden:

     • Öffnen Sie die Registerkarte „Konsole“.
     • Geben Sie „monitorEvents($0)“ in das Feld ein Konsole, wobei $0 das ausgewählte Element darstellt.

   • Ereignistyp angeben:

     • Geben Sie optional den von Ihnen gewünschten Ereignistyp an möchte als zweites Argument für monitorEvents überwachen, z. B. monitorEvents(document.body, 'mouse').

Interaktionen mit dem überprüften Element werden Zeigen Sie nun ihre Ereignisnamen und zugehörigen Daten an.

3. Überwachung stoppen:

   • Um die Ereignisüberwachung zu beenden, geben Sie unmonitorEvents($0) ein der Konsole.

Verfügbare Ereignistypen (Stand 30.01.2023)

Sie können überwachte Ereignisse durch Angabe eingrenzen die folgenden Typen:

• Maus: Mausereignisse (runter, hoch, klicken usw.)
• Taste: Tastaturereignisse ( nach unten, nach oben, drücken usw.)
• berühren: Berührungsereignisse (Start, Bewegung, Ende usw.)
• Steuerung: Element Kontrollereignisse (Größe ändern, Fokus, Änderung usw.)

Das obige ist der detaillierte Inhalt vonWie kann ich Chrome DevTools verwenden, um auf Elementen ausgelöste Ereignisse anzuzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!