Wie kann ich DOM-Ereignisse in Chrome DevTools überwachen?

Überwachen von DOM-Ereignissen mit Chrome DevTools: Eine umfassende Anleitung

Das Verständnis des Verhaltens eines anpassbaren Formularelements auf einer Webseite ist für eine effektive Umsetzung von entscheidender Bedeutung Event-Handling. Chrome Developer Tools bietet die Möglichkeit, Ereignisse zu überwachen, die auf einem Element ausgelöst werden, und bietet Einblicke in deren Vorkommen.

Verwenden der Funktion „monitorEvents“

Zur Überwachung von Ereignissen, die auf einem bestimmten Element ausgelöst werden :

1. Inspizieren Sie das gewünschte Element mit Chrome DevTools.
2. Öffnen Sie die Registerkarte „Konsole“.
3. Geben Sie „monitorEvents($0)“ in die Konsole ein, wobei $0 das ausgewählte Element darstellt .

Während Sie mit dem Element interagieren (z. B. die Maus bewegen, klicken), werden die Namen und Daten der ausgelösten Ereignisse in der Konsole angezeigt.

Überwachung von Ereignissen aufheben

Um die Überwachung von Ereignissen zu beenden, geben Sie unmonitorEvents($0) in die Konsole ein.

Ereignistypen angeben

Sie können die überwachten Ereignisse eingrenzen Ereignisse durch Angabe eines Typs als zweiten Parameter:

monitorEvents(document.body, 'mouse');

Dadurch werden nur mausbezogene Ereignisse wie „mousedown“, „mouseup“ und „mousemove“ überwacht.

Verfügbare Ereignistypen (Stand 30.01.2023)

• Maus: „mousedown“, „mouseup“, „click“, „dblclick“, „mousemove ", "mouseover", "mouseout", "mousewheel"
• Taste: "keydown", "keyup", "keypress", "textInput"
• Touch: „Touchstart“, „TouchMove“, „TouchEnd“, „TouchCancel“
• Steuerung: „Größe ändern“, „Scrollen“, „Zoom“, „Fokus“ , „verwischen“, „auswählen“, „ändern“, „übermitteln“, „zurücksetzen“

Verwendungsbeispiel

Das folgende animierte GIF veranschaulicht das Verwendung der Funktion „monitorEvents“:

[Bild eines GIF, das die Überwachung von Ereignissen auf einem Element demonstriert]

Das obige ist der detaillierte Inhalt vonWie kann ich DOM-Ereignisse in Chrome DevTools überwachen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!