GetEventListeners

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Created page with "Returns all the event listeners registered for specific node. == Syntax == <source lang="javascript"> getEventListeners(node) </source> == Parameters == === node === The elemen...")
m (Added categories)
 
(3 intermediate revisions not shown)
Line 1: Line 1:
-
Returns all the event listeners registered for specific node.
+
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.''
== Syntax ==
== Syntax ==
<source lang="javascript">
<source lang="javascript">
-
getEventListeners(node)
+
getEventListeners(target)
</source>
</source>
== Parameters ==
== Parameters ==
-
=== node ===
+
=== target ===
-
The element (event target) for which registered listeners are returned.
+
The event target for which registered listeners are returned.
== Examples ==
== Examples ==
Line 23: Line 25:
</source>
</source>
-
The Console panel result is a simple object an array for each event type (e.g. "click" or "mousemove"). The following screenshot shows that there are two ''click'' and one ''mousemove'' registered listeners on ''document.body'' element.
+
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.
[[File:GetEventListeners1.png]]
[[File: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.
-
If you want to see more about registered listeners click on the green object in the Console panel and you'll navigated to the DOM panel. See the next screenshot.
+
[[File:GetEventListeners3.png]]
[[File:GetEventListeners3.png]]
-
Every item in the arrays describes particular listener. You can see if ''useCapture'' is set and 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.
+
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.
 +
== 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:
 +
<source lang="javascript">
 +
Event.observe(document.body, "click", function() {
 +
    console.log("clicked");
 +
});
 +
f = getEventListeners(document.body).click[0].listener;
 +
</source>
 +
 +
Luckily Firebug provides a way to get to the original function, through the [[Closure Inspector]]:
 +
<source lang="javascript">
 +
f.%handler
 +
</source>
 +
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")''.
== 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