GetEventListeners

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Explain how to deal with libraries)
m (Added categories)
 
Line 55: Line 55:
== See also ==
== See also ==
* [[Command Line API]]
* [[Command Line API]]
 +
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:API]]

Latest revision as of 00:07, 22 November 2013

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).

This feature has been introduced in Firebug 1.12.

Contents

[edit] Syntax

getEventListeners(target)

[edit] Parameters

[edit] target

The event target for which registered listeners are returned.

[edit] Examples

An example of a web page that registers three listeners:

document.body.addEventListener("click", function onClick1() {}, true);
document.body.addEventListener("click", function onClick2() {}, true);
document.body.addEventListener("mousemove", function onMouseMove1() {}, true);

This is what you execute on the Command Line.

getEventListeners(document.body);

The Console panel result is a simple object containing an array for each event type (e.g. "click" or "mousemove"). The following screenshot shows that there are two click and one mousemove listeners registered on the <body> element.

GetEventListeners1.png

If you want to see more about registered listeners, click the green object in the Console Panel and you'll be navigated to the DOM Panel. See the next screenshot.

GetEventListeners3.png

Every item in the arrays describes a particular listener. You can see whether useCapture is set and the name of the function used as the listener handler. If you click the function, you'll be navigated to the Script Panel to see its source code.

[edit] But I'm only seeing library wrapper functions?

JavaScript libraries that provide the ability to add event listeners often register their own functions as listeners, to make sure they can handle e.g. return values correctly. For instance, in the following example with prototype.js, f is a Prototype-internal function:

Event.observe(document.body, "click", function() {
    console.log("clicked");
});
f = getEventListeners(document.body).click[0].listener;

Luckily Firebug provides a way to get to the original function, through the Closure Inspector:

f.%handler

The exact name of the variable obviously differs between libraries, and minified versions of them.

jQuery is special here in that it doesn't put the callback into a closure; instead you can use jQuery._data(element, "events").

[edit] See also

Personal tools