Jeder kennt die Situation: Man entwickelt clientseitig z.B. mit Javascript, registriert dabei viele Events oder es wird an einer bestehenden Applikation gearbeitet und es muss das bestehende JavaScript angepasst werden. Wie behält man in beiden Fällen den Überblick über die Events auf einer Seite?
Ein Tool, das ich im Rahmen einer Arbeit bei einem Kunden kennengelernt habe, ist “visual event”. Dieses Werkzeug ist ein sogenanntes Bookmarklet.
Wie funktioniert es und was macht es? Man fügt per Drag’n’Drop von der Seite http://www.sprymedia.co.uk/article/Visual+Event den Button “Visual Event” in die Bookmarkleiste des Browsers.
Ist dies geschehen, kann eine bestehende Seite geöffnet werden. Hier können nun die Events untersucht werden, welche auf der Seite existieren. Ist die Seite geöffnet, klickt man auf das zuvor hinzugefügte Bookmark. Nach kurzer Zeit wird die Seite abgedunkelt und es erscheinen kleine, farbige Kästchen, die über die Art des Events (Maus: Klick, Doppelklick, Mouseover; HTML – Events: select, blur, focus sowie UI Events: Key down, Key up etc.) aufklären.
Fährt man mit der Maus über die Kästchen, erhält man Informationen wo im Skript diese Events behandelt werden.
Sehr hilfreich, wenn man den Überblick verlieren sollte, wer was wann wieso wo macht!