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!
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!
Leave a reply
Logged in as (Logout)