Wie kann ich Chrome DevTools verwenden, um bestimmte Ereignisse zu überwachen, die auf einem Webseitenelement ausgelöst werden?

Überwachen von Ereignissen in Chrome DevTools

Sie können mit Chrome Web Developer auf jedem Element ausgelöste Ereignisse überwachen, indem Sie die leistungsstarke Funktion „monitorEvents“ nutzen. So geht's:

1. Inspizieren Sie das Zielelement: Klicken Sie mit der rechten Maustaste auf das gewünschte Element und wählen Sie „Inspizieren“ oder gehen Sie zur Registerkarte „Elemente“ und wählen Sie es aus.
2. Zugriff auf die Konsole: Navigieren Sie zur Registerkarte „Konsole“ in den Chrome-Entwicklertools.

3. Rufen Sie „monitorEvents“ auf: Geben Sie den folgenden Befehl in die Konsole ein :

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

   ))

   wobei $0 das ausgewählte DOM-Element darstellt.

4. Ereignisdaten beobachten: Mit dem Element interagieren (z. B. mit der Maus darüber fahren, fokussieren, klicken). ) und beobachten Sie die angezeigten Ereignisnamen und die zugehörigen Daten.

Um die Ereignisüberwachung zu stoppen, geben Sie einfach den folgenden Befehl ein:

Alternativ können Sie einen Ereignistyp angeben als der zweite Parameter zum Filtern überwachter Ereignisse. Zum Beispiel:

beschränkt die Überwachung auf mausbezogene Ereignisse. Eine Liste der verfügbaren Ereignistypen umfasst:

• Maus: Mousedown, Mouseup, Klicken, Doppelklick, Mousemove, Mouseover, Mouseout, Mausrad
• Taste :Taste nach unten, Taste nach oben, Tastendruck, Texteingabe
• Touch:Touchstart, TouchMove, TouchEnd, TouchCancel
• Steuerung:Größe ändern, scrollen, Zoomen, Fokussieren, Unschärfe, Auswählen, Ändern, Senden, Zurücksetzen

Das unten abgebildete GIF zeigt die Verwendung der Funktion „monitorEvents“:

[Bild eines GIF, das die Verwendung der Funktion „monitorEvents“ zeigt ]

Das obige ist der detaillierte Inhalt vonWie kann ich Chrome DevTools verwenden, um bestimmte Ereignisse zu überwachen, die auf einem Webseitenelement ausgelöst werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!