Um auf Nutzerinteraktionen, die auf einem DOM-Element stattfinden, zu reagieren, ist es hilfreich zu wissen welche JS-Events feuern, um einen entsprechenden Handler zu definieren. In diesem Beitrag zeige ich kurz 2 Möglichkeiten.

Event Listener Breakpoints nutzen

In den Developer Tools im Browser und im Tab “Sources” gibt es ganz rechts den Punkt “Event Listener Breakpoints”:

Hier lassen sich Events auswählen, die man überwachen möchte. Aktiviert man z.B. das Event “click” und interagiert mit dem Ziel-Element und klickt drauf, dann taucht der Break Point auf, falls das gewählte Event auf dem Element feuert.

monitorEvents-Funktion nutzen

Hierzu muss man im Browser zunächst mit der rechten Maustaste auf das Element, welches man überwachen möchte, klicken. Wähle dann im Menü “Untersuchen” und es öffnen sich die Developer Tools. Das ausgewählte Element ist dann im Elements-Tab aktiv:

Wechsle dann in den Console-Tab und führe folgende Funktion aus:

monitorEvents($0)

Wenn du jetzt mit dem Element interagierst (klicken, drüber scrollen, etc.) bekommst du in der Konsole alle gefeuerten Events ausgegeben:

Statt $0 kann man auch ein beliebig anders Element (welches man z.B. mittels getElementById oder getElementsByClassName holt) setzen. $0 teilt der Funktion nur mit, dass es sich das letzte ausgewählte Element im DOM holen soll. Um die Überwachung zu stoppen, muss folgende Funktion ausgeführt werden:

unmonitorEvents($0)

Die monitorEvents-Funtion kann aber auch weitere Parameter entgegen nehmen. Am Screenshot oben kann man z.B. sehen, dass viele Events feuern. Das mousemove-Event führt dazu, dass jedes Mal wenn ich über das Element mit der Maus fahre, ein Event gefeuert wird. Die Konsole kann dadurch schnell unübersichtlich werden. Deshalb kann die monitorEvents-Funktion einen Parameter entgegen nehmen, um zu definieren auf welche Events man konkret hören möchte. Zum Beispiel:

monitorEvents(document.getElementsByTagName('h2')[0], 'click');

Ergebnis: