JS function displaying all JS event binded to DOM elements corresponding to passed jQuery selector.

readme.md

Why ?

I'm currently working on refactoring the javascript production code of a large ecommerce website. I needed a tool to quickly investigate events binded to DOM elements (especially when several scripts fragments are interacting on the same DOM structures).

How ?

Copy and paste this code in the javascript console of your browser (firefox and chrome tested). Call the function with the chosen selector in parameter and voilà ! In my case, I call it several times with production code stopped at several breakpoints.

eventsShow

function eventsShow(selecteur, eventType) {

	var jElements = jQuery(selecteur);
	
	console.groupCollapsed("Gestionnaires d'évènements pour les éléments correspondant à jQuery(\"%s\");",selecteur);

	//on boucle sur les éléments
	for (var j = 0; j < jElements.length; j++) {

		var element = jElements.get(j);
		var events = $._data(element, "events");

		if (events) {
			if (eventType) {
				console.groupCollapsed("Evènements '" + eventType + "' sur :\n %o", element);
				if (events[eventType]) {
					console.log("Il y a " + events[eventType].length + " gestionnaires d'evenements '" + eventType + "' sur cet élément");
					console.dir(events[eventType]);
				} else {
					console.log("pas d'évènement de type %s associé à cet élément", eventType);
				}
			} else {
				console.groupCollapsed("Evènements sur :\n %o", element);
				
				var eventCount = 0;
				for (var key in events) {
					if (events.hasOwnProperty(key)) {
						eventCount = eventCount + events[key].length;
					}
				}
				console.log("Il y a " + eventCount + " gestionnaires d'évenements sur cet élément");
				for (var key in events) {
					if (events.hasOwnProperty(key)) {
						console.dir(events[key]);
					}
				}

			}
		} else {
			console.info("Pas d'évènements sur cet élément");
		}
		console.groupEnd();
	}
	console.groupEnd();
}


var selecteur = "body";
//var eventType= "click";
//eventsShow("#overlay", "click");
eventsShow("input");