GetEventListeners

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Explain how to deal with libraries)
(Added mutation observer description and example)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
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).
+
Returns all the event listeners and mutation observers registered for a specific target. The target can either be an element or another DOM object that accepts event listeners (e.g. <code>window<code> or an <code>XMLHttpRequest</code>).
''This feature has been introduced in Firebug 1.12.''
''This feature has been introduced in Firebug 1.12.''
Line 13: Line 13:
== Examples ==
== Examples ==
 +
=== Event Listeners ===
An example of a web page that registers three listeners:
An example of a web page that registers three listeners:
<source lang="javascript">
<source lang="javascript">
Line 34: Line 35:
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.
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.
 +
 +
=== Mutation observer ===
 +
An example web site that registers a [https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver mutation observer] for an element with ID <code>testElement</code>.
 +
 +
<source lang="javascript">
 +
var target = document.getElementById("testElement");
 +
 +
var observer = new MutationObserver(function(mutations)
 +
{
 +
  mutations.forEach(function(mutation)
 +
  {
 +
    console.log(mutation.type);
 +
  });   
 +
});
 +
 +
var config = { attributes: true, childList: true, characterData: true };
 +
 +
observer.observe(target, config);
 +
</source>
 +
 +
Executing <code>getEventListeners($("testElement"))</code> within the [[Command Line]] results in this output:
 +
 +
[[File:GetEventListeners4.png]]
== But I'm only seeing library wrapper functions? ==
== But I'm only seeing library wrapper functions? ==
Line 55: Line 79:
== See also ==
== See also ==
* [[Command Line API]]
* [[Command Line API]]
 +
* [[Events Side Panel]]
 +
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:API]]

Latest revision as of 14:44, 8 January 2015

Returns all the event listeners and mutation observers registered for a specific target. The target can either be an element or another DOM object that accepts event listeners (e.g. window<code> or an <code>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

[edit] Event Listeners

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] Mutation observer

An example web site that registers a mutation observer for an element with ID testElement.

var target = document.getElementById("testElement");
 
var observer = new MutationObserver(function(mutations)
{
  mutations.forEach(function(mutation)
  {
    console.log(mutation.type);
  });    
});
 
var config = { attributes: true, childList: true, characterData: true };
 
observer.observe(target, config);

Executing getEventListeners($("testElement")) within the Command Line results in this output:

GetEventListeners4.png

[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