Oops…

Well, I hit the “update” button in WordPress and it hosed my site.

It took a lot of fighting to get it working again.

My content is – mostly restored, but there are still issues with old posts and code and things.

I spent a while trying to make it useable – but most of the code stuff is jQuery, and I haven’t written jQuery in nearly a decade, so I don’t really have any plans to go back and fix the problems any more than I already have. It’s already eaten too much of my time.

Getting All jQuery Events for a DOM Node.

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.

jQuery Events

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); })();