Comment puis-je surveiller les événements DOM dans Chrome DevTools ?

Surveillance des événements DOM avec Chrome DevTools : un guide complet

Comprendre le comportement d'un élément de formulaire personnalisable sur une page Web est crucial pour une gestion efficace gestion des événements. Les outils de développement Chrome offrent la possibilité de surveiller les événements déclenchés sur un élément, fournissant ainsi des informations sur leurs occurrences.

Utilisation de la fonction monitorEvents

Pour surveiller les événements déclenchés sur un élément spécifique :

1. Inspectez l'élément souhaité à l'aide de Chrome DevTools.
2. Ouvrez l'onglet Console.
3. Tapez monitorEvents($0) dans la console, où $0 représente l'élément sélectionné. .

Lorsque vous interagissez avec l'élément (par exemple, déplacez la souris, cliquez), les noms et les données des événements déclenchés apparaîtront dans la console.

Annulation de la surveillance des événements

Pour arrêter la surveillance des événements, tapez unmonitorEvents($0) dans la console.

Spécification des types d'événements

Vous pouvez affiner la surveillance événements en spécifiant un type comme deuxième paramètre :

monitorEvents(document.body, 'mouse');

Cela surveillera uniquement les événements liés à la souris tels que "mousedown", "mouseup" et "mousemove".

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

• souris : "mousedown", "mouseup", "click", "dblclick", "mousemove ", "mouseover", "mouseout", "mousewheel"
• key: "keydown", "keyup", "keypress", "textInput"
• toucher : "touchstart", "touchmove", "touchend", "touchcancel"
• contrôle : "resize", "scroll", "zoom", "focus" , "blur", "select", "change", "submit", "reset"

Exemple d'utilisation

Le GIF animé suivant illustre le utilisation de la fonction monitorEvents :

[Image de GIF démontrant le suivi des événements sur un élément]

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!