Subscribe to RSS Feed

One of the new features introduced in Firebug 1.12 is a new Command Line command called:

getEventListeners()
 
The command returns all the event listeners registered for specific target. The target can be either an element, or another DOM object that accepts event listeners (e.g. window or an XMLHttpRequest).

Basic Scenario

Let's see how the basic usage of the getEventListeners() command looks like. First, here is a test page that registers one click listener for a testElement.

<!DOCTYPE html>
<html>
<head>
<title>getEventListeners()</title>
</head>
<body>
<div id="testElement">Click Me!</div>
<script>
function myClickListener()
{
    console.log("click");
}
var testElement = document.getElementById("testElement");
testElement.addEventListener("click", myClickListener, false);
</script>
</body>
</html>

The expression we are going to execute on Firebug's Command Line looks like as follows:

getEventListeners($("#testElement"))

It returns a descriptor object that is logged into the Console panel.

If you click the descriptor you'll be navigated to the DOM panel that allows further inspection.

As you can see, there is one click listener registered with the testElement element (the click field is an array containing all registered click listeners). Clicking the myClickListener function navigates you to the Script panel to see its source code and perhaps create a breakpoint for further debugging.

Using getEventListeners() in an expression

In some cases, we might want to reference the listener function directly in an expression:

getEventListeners($("#testElement")).click[0].listener

The expression returns directly the handler function that is logged into the Console panel. You'll be navigated to the Script panel directly if you click the return value.

You might also want to manually execute the listener function and e.g. break in the debugger in case you created a breakpoint inside the method.

getEventListeners($("#testElement")).click[0].listener()

Event Listeners & Closures

Some JavaScript libraries that implements API for event listener registration might register their own function and call the original listener through a closure. Let's see a simple example that demonstrates this technique.

observe(testElement, "click", function myClickHandler() {
    console.log("click");
});

function observe(element, eventType, handler) {
    function localHelper() {
        handler();
    }
    return element.addEventListener(eventType, localHelper, false);
}

Executing the following expression on the command line returns localHelper function since it's the registered event handler.

getEventListeners($("#testElement")).click[0].listener

If you want to log the original listener function myClickHandler - you need to get the handler argument that is accessed by localHelper closure. Next expression shows how variable inside a closure can be accessed (via: .% syntax).

getEventListeners($("#testElement")).click[0].listener.%handler

This expression returns reference to myClickHandler function.

 

You can read more about Closure Inspector on Firebug wiki.
You can also read wiki page about getEventListeners command.

 

Rss Commenti

5 Comments

  1. Does this also display MutationObservers observing the element?

    #1 aleth
  2. @aleth: Good question, not at the moment, but I like the idea and I'll ask around if Firefox could implement a new API for this!

    #2 Honza
  3. @aleth: requirement for new API to enumerate also mutation observers created here:
    https://bugzilla.mozilla.org/show_bug.cgi?id=912874

    #3 Honza
  4. Enhancement report in the official Firebug issue list: http://code.google.com/p/fbug/issues/detail?id=6740

    #4 Honza
  5. [...] different, but we also have Firebug’s getEventListeners(elem), which would be really handy for [...]

    #5 Today’s Readings | Aaron T. Grogg

Sorry, the comment form is closed at this time.