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.

[edit] Context Menu

[edit] Panel

Option Description
Refresh Reloads the list of event listeners

[edit] Functions

Option Description
Log Calls to "<function name>" If checked, all calls to that function will be logged to the Console Panel
Set Breakpoint Toggles a breakpoint at the first executable line of the function
Copy Function Copies the whole code of the function to the clipboard
Use in Command Line Allows to use the function within the Command Line via the $p command
Inspect in DOM Panel Switches to the DOM Panel and displays the function properties there
Inspect in Script Panel Switches to the Script Panel and jumps to the function defintion
Personal tools