Events Side Panel

From FirebugWiki

Jump to: navigation, search
Events Side Panel

The Events side panel lets you see what event listeners are bound to the element currently selected in the HTML Panel. Similar to the Style Side Panel, listeners for parent nodes are also shown for event types that bubble, and you can disable or enable any event listener by clicking an icon to the left of the function name. Clicking an event listener function will take you to the definition of that listener within the Script Panel.

It is common with e.g. JavaScript libraries that user-defined functions are not added as event listeners, but rather that the library calls the function indirectly through a wrapper:

function addListener(el, fn) {
  el.addEventListener(function() {
    // ... normalize arguments, this, and return value somehow ...
    return fn.apply(this, arguments);
  });
}
 
addListener(someElement, userDefinedFunction);

When the "Show Wrapped Listeners" option is enabled, Firebug tries to detect this pattern and show even the user-defined function, and not only the wrapper. The Script Panel must be enabled for this feature to work.

[edit] Options Menu

This menu is reachable via the little arrow in the panel tab ( EventsSidePanelOptionsMenuArrow.png ) or by right-clicking on on the panel tab.

Option Preference Description
Show Wrapped Listeners extensions.firebug.showWrappedListeners Shows functions wrapped by generic event listeners, like library code (see description above)
Refresh - Refreshes the view, so you can see event listeners added after the panel was loaded

For more info about tweaks available in Firebug please see the full list of preferences.

Personal tools