How do I find event handlers for any DOM element?
Time for a quick tech post for a change. Most of my time is spent running and growing the business – like 95% of the time actually … but for 5% of the time, I like to get my sleeves rolled up and do some coding – be it with Magento, WordPress, JS, JQuery, CSS or something else that I really enjoy.
I had an issue very early this morning that I was going through debugging some of Nathan’s code in a web browser for Extreme Algarve. It’s not a tough piece of code – a web-based form, with some good JQuery additions to make the form look and behave much nicer.
One piece of feedback from one of our testers was to change the way a select box behaved – so some value displayed “Days” instead of “Hours” – it doesn’t really matter what I needed to do – what’s important is how I went about finding Nathan’s code!
Nathan had written an event handler, somewhere, that when the select box was changed (“Blur” event), something else on the page was changed. I viewed the source – nothing obvious inline against the element. I looked in Firebug – nothing I could see at all. And that’s when I realised, short of going through every Javascript library loaded against that page, and viewing any code anywhere else on that page, it was tough to find event handlers! Since events could be attached at any point anywhere – before page load, after DOM load, in an external library loaded at runtime loaded in remotely, you name it – this was going to get tricky!
There HAD to be a better way than trawling through code … or asking the developer where he thinks the event handler might be!
So – that’s the reason for this post – there is a SUPERB way to find ALL EVENT HANDLERS for every element on a webpage!
The solution is called Visual Event and it’s a bookmarklet (as well as other ways to implement) that you just click when you’re on a webpage, and it allows you to inspect any DOM element and see attached events. It works superbly, it’s beautifully thought out and is really visually simple and pleasing on the eye – I couldn’t ask for more.
It works with any normal event attachment handler, including JQuery, Prototype, regular DOM0 events, MooTools, Glow and YUI.
You can grab the bookmarklet and entire source code here - https://github.com/DataTables/VisualEvent
Thank you, Allan Jardine of Spry Media for a superb addition to the Open Source community – you’re a genius and a saver of many hours for me!
Awsome tool, Need ExtJS support too though