I have more than once found myself needing to know all of the events for a specific DOM node. In the past I have used which worked great for a time. The problem is that I am now working on projects so large that Visual Events takes forever to load and then fills the entire screen making it nigh impossible to find the events for the node I am interested in. Combine this with live events, delegated events, on/off, etc, Visual Events was no longer doing the job for me. So I made myself another bookmarklet.
To use it:
Drag the link to your bookmark bar.
Open the page you wish to see the events on.
Open your javascript console.
Click the bookmarklet.
Click the little red “Click Me” it puts in the top left corner.
Click the element you wish to see the events for.
In your console you will see a list of all of the events for the node you clicked, what type they are, and their namespace. If the node you click has no events (perhaps you clicked an element inside of the one with the events) it will look up the DOM until it finds a node with events. It will also look all the way up the DOM for that node and show you all of the events that are delegated to that node. The code could use a lot of cleanup and stuff, but it works for me right now.
Here is the code for it:
javascript:(function() {
$('#eventFinder, #eventTitle').remove();
$(document.body).append('
');
$(document.body).append('
Click Me
');
$('#eventTitle').click(function() {
$('#eventFinder').show();
});
function findNodeEvents(e) {
$('#eventFinder').hide();
var ele;
if(e.pageX) {
ele = document.elementFromPoint(e.pageX, e.pageY);
} else {
ele = e[0];
}
var tmpEvents;
var $origEle = $(ele);
var $ele = $origEle;
var events = [];
var eventsFound = false;
console.log('Finding events for node:');
console.log($origEle);
while(true) {
tmpEvents = $ele.data('events');
if(tmpEvents) {
for(type in tmpEvents) {
for(var i = 0; i < tmpEvents[type].length; i++) { if(((!tmpEvents[type][i].selector && $ele[0] === ele) || $origEle.is(tmpEvents[type][i].selector))) { eventsFound = true; if($ele[0] !== ele) { console.log('Delegated From:'); console.log($ele); } console.log('Event: ' + type + (tmpEvents[type][i].namespace ? '.' + tmpEvents[type][i].namespace : '') + ': ' + tmpEvents[type][i].handler); } } } } $ele = $ele.parent(); if($ele.length <= 0) { break; } } if(!eventsFound) { var $parent = $origEle.parent(); if($parent.length > 0) {
console.log('No events found - Trying parent');
findNodeEvents($parent);
} else {
console.log('No events found - Do you know what you are doing?');
}
}
};
$('#eventFinder').click(findNodeEvents);
})();
Thank you so much this will save so much time an energy, and the fact that it has a cap on the episodes means i wont feel guilty about wasting any of the servers energy! thank you so much this is awesome