Comment puis-je utiliser Chrome DevTools pour surveiller des événements spécifiques déclenchés sur un élément de page Web ?

Surveillance des événements dans Chrome DevTools

Vous pouvez surveiller les événements déclenchés sur n'importe quel élément à l'aide de Chrome Web Developer en exploitant la puissante fonction MonitorEvents. Voici comment :

1. Inspecter l'élément cible : Faites un clic droit sur l'élément souhaité et sélectionnez "Inspecter" ou allez dans l'onglet "Éléments" et sélectionnez-le.
2. Accédez à la console : Accédez à l'onglet "Console" dans les outils de développement Chrome.

3. Invoquez monitorEvents : Tapez la commande suivante dans la console :

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

   ))

   où $0 représente l'élément DOM sélectionné.

4. Observer les données de l'événement : Interagir avec l'élément (par exemple, survoler la souris, se concentrer, cliquer ) et soyez témoin des noms d'événements affichés et de leurs données associées.

Pour arrêter la surveillance des événements, entrez simplement la commande suivante :

Vous pouvez également spécifier un type d'événement comme le deuxième paramètre pour filtrer les événements surveillés. Par exemple :

limitera la surveillance aux événements liés à la souris. Une liste des types d'événements disponibles comprend :

• mouse : mousedown, mouseup, click, dblclick, mousemove, mouseover, mouseout, mousewheel
• key : keydown, keyup, keypress, textInput
• touch: touchstart, touchmove, touchend, touchcancel
• control: redimensionner, faire défiler, zoomer, mettre au point, flouter, sélectionner, modifier, soumettre, réinitialiser

Le GIF illustré ci-dessous montre l'utilisation de la fonction moniteurEvents :

[Image du GIF montrant l'utilisation de la fonction moniteurEvents ]

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!