javascript - Hur tittar jag på händelser som utlöses på ett element i Chrome DevTools?

Jag har ett anpassningsbart formelement på en sida från ett bibliotek. Jag vill se vilka JavaScript-händelser som utlöses när jag interagerar med det eftersom jag försöker ta reda på vilken händelsehanterare jag ska använda.

Hur gör jag det med Chrome Web Developer?

Svar #1

Du kan använda funktionen monitorEvents.

Inspektera bara ditt element (högerklick → Inspektera på synligt element eller gå till fliken Elements i Chrome Developer Tools och välj önskat element) och gå sedan till fliken Console och skriv:

monitorEvents($0)

Nu när du för musen över detta element, fokuserar på det eller klickar på det, kommer namnet på det utlösta evenemanget att visas tillsammans med dess data.

För att sluta få dessa data, skriv bara detta i konsolen:

unmonitorEvents($0)

$0 är bara det sista DOM-elementet som valts av Chrome Developer Tools. Du kan skicka vilket annat DOM-objekt som helst där (till exempel resultatet av getElementById eller querySelector).

Du kan också specificera händelsens "typ" som andra parameter för att begränsa övervakade händelser till en viss fördefinierad uppsättning. Till exempel:

monitorEvents(document.body, 'mouse')

Listan över dessa tillgängliga typer är följande från och med 2023-01-30:

mus
"mousedown", "mouseup", "klicka", "dubbelklick", "musrörelse", "mushover", "musutanför", "muscurl"
tangent
"keydown", "keyup", "keypress", "textInput"
touch
"touchstart", "touchmove", "touchend", "touchcancel"
kontroll
"ändra storlek", "scrolla", "zooma", "fokusera", "blurra", "välj", "ändra", "skicka", "återställ"

Tagen härifrån.

Jag gjorde en liten gif som visar hur den här funktionen fungerar:

Svar #2

Tryck på F12 för att öppna utvecklarverktyg
Klicka på fliken Källor
På höger sida, scrolla ner till "Event Listener Breakpoints" och expandera trädet
Klicka på de händelser du vill lyssna efter.
Interagera med målobjektet, om de utlöses kommer du att få en brytpunkt i debuggern

På samma sätt kan du högerklicka på målobjektet -> välj "inspektera element". Scrolla ner på höger sida av utvecklarpanelen, längst ner finns 'händelselyssnare'. Expandera trädet för att se vilka händelser som är kopplade till elementet. Inte säker på om detta fungerar för händelser som hanteras genom bubblande (jag antar att inte).

Svar #3

Visual Event är ett trevligt litet bokmärkesverktyg som du kan använda för att visa ett elements händelsehanterare. En online-demo kan ses här.

Svar #4

För jQuery (åtminstone version 1.11.2) fungerade följande procedur för mig.

Högerklicka på elementet och öppna 'Chrome Developer Tools'
Skriv $._data(($0), 'events'); i 'Konsolen'
Expandera de bifogade objekten och dubbelklicka på handler:-värdet.
Detta visar källkoden för den bifogade funktionen, sök efter en del av den med fliken 'Sök'.

Och det är dags att sluta uppfinna hjulet på nytt och börja använda vanliga JS-händelser ... :)

Svar #5

Detta kommer inte att visa anpassade händelser som de din skript kan skapa om det är ett jQuery-plugin. till exempel:

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});