Maison > interface Web > js tutoriel > Comment puis-je utiliser Chrome DevTools pour afficher les événements déclenchés sur les éléments ?

Comment puis-je utiliser Chrome DevTools pour afficher les événements déclenchés sur les éléments ?

Patricia Arquette
Libérer: 2024-10-28 12:15:02
original
559 Les gens l'ont consulté

How Can I Use Chrome DevTools to View Events Fired on Elements?

Affichage des événements déclenchés sur des éléments avec Chrome DevTools

Pour dépanner et optimiser la gestion des événements sur vos pages Web, vous pouvez utiliser Chrome DevTools pour inspecter les événements déclenchés sur des éléments spécifiques.

Exécutez les étapes suivantes à l'aide de Chrome Web Developer :

  1. Inspectez l'élément :

    • Cliquez avec le bouton droit sur l'élément cible et sélectionnez « Inspecter » ou accédez à l'onglet « Éléments » dans DevTools.
  2. Surveiller les événements :

    • Utilisation de monitorEvents :

      • Ouvrez l'onglet "Console".
      • Entrez monitorEvents($0) dans le champ console, où $0 représente l'élément sélectionné.
    • Spécification du type d'événement :

      • Facultativement, indiquez le type d'événement que vous souhaitez surveiller comme deuxième argument de monitorEvents, par exemple, monitorEvents(document.body, 'mouse').

Les interactions avec l'élément inspecté seront affichent désormais leurs noms d'événements et les données associées.

  1. Arrêter la surveillance :

    • Pour interrompre la surveillance des événements, saisissez unmonitorEvents($0) dans la console.

Types d'événements disponibles (au 30/01/2023)

Vous pouvez affiner les événements surveillés en spécifiant les types suivants :

  • souris : événements de souris (bas, haut, clic, etc.)
  • touche : événements de clavier ( bas, haut, appuyer, etc.)
  • toucher : événements tactiles (début, déplacement, fin, etc.)
  • contrôle : élément contrôler les événements (redimensionnement, focus, changement, etc.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal