MonitorEvents

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Added description of syntax, hint for needing help and linked back to Command Line API)
m (Added categories)
 
(4 intermediate revisions not shown)
Line 1: Line 1:
-
{{needsHelp}}
+
Turns on logging for all or specific events dispatched to an object.
-
 
+
-
Turns on logging for all events dispatched to an object. The optional argument <code>types</code> may define specific events or event types to log.
+
== Syntax ==
== Syntax ==
Line 7: Line 5:
monitorEvents(object[, types])
monitorEvents(object[, types])
</source>
</source>
 +
 +
== Parameters ==
 +
=== object ===
 +
Object to log events for. '''(required)'''
 +
 +
=== types ===
 +
Event type(s) to log. This can be a single event type or an array of event types. (optional)
 +
 +
Besides supporting all normal events Firebug and Web Inspector offer a bunch of event groups, which combine several event types.
 +
 +
==== Event groups ====
 +
{| class="wikitable" style="width:100%; vertical-align:top;"
 +
|- bgcolor=lightgrey
 +
! style="width:100px;" | Group || Included events in Firebug || Included events in Web Inspector
 +
|-
 +
| <code>composition</code> || <code>composition</code>, <code>compositionend</code>, <code>compositionstart</code> || -
 +
|-
 +
| <code>contextmenu</code> || <code>contextmenu</code> || -
 +
|-
 +
| <code>control</code> || - || <code>blur</code>, <code>change</code>, <code>focus</code>, <code>reset</code>, <code>resize</code>, <code>scroll</code>, <code>select</code>, <code>submit</code>, <code>zoom</code>
 +
|-
 +
| <code>drag</code> || <code>dragdrop</code>, <code>dragenter</code>, <code>dragexit</code>, <code>draggesture</code>, <code>dragover</code> || -
 +
|-
 +
| <code>focus</code> || <code>blur</code>, <code>focus</code> || -
 +
|-
 +
| <code>form</code> || <code>change</code>, <code>input</code>, <code>reset</code>, <code>select</code><code>submit</code> || -
 +
|-
 +
| <code>key</code> || <code>keydown</code>, <code>keypress</code>, <code>keyup</code> || <code>keydown</code>, <code>keypress</code>, <code>keyup</code>, <code>textInput</code>
 +
|-
 +
| <code>load</code> || <code>abort</code>, <code>beforeunload</code>, <code>error</code>, <code>load</code>, <code>unload</code> || -
 +
|-
 +
| <code>mouse</code> || <code>click</code>, <code>dblclick</code>, <code>mousedown</code>, <code>mousemove</code>, <code>mouseup</code>, <code>mouseout</code>, <code>mouseover</code> || <code>click</code>, <code>dblclick</code>, <code>mousedown</code>, <code>mousemove</code>, <code>mouseup</code>, <code>mouseout</code>, <code>mouseover</code>, <code>mousewheel</code>
 +
|-
 +
| <code>mutation</code> || <code>DOMSubtreeModified</code>, <code>DOMNodeInserted</code>, <code>DOMNodeRemoved</code>, <code>DOMNodeRemovedFromDocument</code>, <code>DOMNodeInsertedIntoDocument</code>, <code>DOMAttrModified</code>, <code>DOMCharacterDataModified</code> || -
 +
|-
 +
| <code>paint</code> || <code>paint</code>, <code>resize</code>, <code>scroll</code> || -
 +
|-
 +
| <code>scroll</code> || <code>overflow</code>, <code>underflow</code>, <code>overflowchanged</code> || -
 +
|-
 +
| <code>text</code> || <code>text</code> || -
 +
|-
 +
| <code>touch</code> || <code>touchstart</code>, <code>touchend</code>, <code>touchmove</code>, <code>touchenter</code>, <code>touchleave</code>, <code>touchcancel</code> ([http://code.google.com/p/fbug/issues/detail?id=5893 since Firebug 1.11]) || <code>touchstart</code>, <code>touchend</code>, <code>touchmove</code>, <code>touchcancel</code>
 +
|-
 +
| <code>ui</code> || <code>DOMActivate</code>, <code>DOMFocusIn</code>, <code>DOMFocusOut</code> || -
 +
|-
 +
| <code>xul</code> || <code>popupshowing</code>, <code>popupshown</code>, <code>popuphiding</code>, <code>popuphidden</code>, <code>close</code>, <code>command</code>, <code>broadcast</code>, <code>commandupdate</code> || -
 +
|-
 +
| <code>clipboard</code> || <code>cut</code>, <code>copy</code>, <code>paste</code> || -
 +
|}
 +
 +
== Examples ==
 +
<source lang="javascript">
 +
monitorEvents(document.body)
 +
</source>
 +
 +
This will monitor all events occurring to the <code>&lt;body&gt;</code> element.
 +
 +
<source lang="javascript">
 +
monitorEvents(document.getElementsByTagName("input")[0], "keydown")
 +
</source>
 +
 +
This will monitor all <code>keydown</code> events occurring to the first <code>&lt;input&gt;</code> element.
 +
 +
<source lang="javascript">
 +
monitorEvents(document.getElementById("interactive"), "mouse")
 +
</source>
 +
 +
This will monitor all mouse events (<code>click</code>, <code>dblclick</code>, <code>mousedown</code>, <code>mousemove</code>, <code>mouseup</code>, <code>mouseout</code> and <code>mouseover</code>) occurring to the element with the id  <code>interactive</code>.
 +
 +
<source lang="javascript">
 +
monitorEvents(document.getElementById("interactive"), ["mouse", "keyup", "keydown"])
 +
</source>
 +
 +
This will monitor all mouse events (<code>click</code>, <code>dblclick</code>, <code>mousedown</code>, <code>mousemove</code>, <code>mouseup</code>, <code>mouseout</code> and <code>mouseover</code>) plus all <code>keyup</code> and <code>keydown</code> events occurring to the element with the id <code>interactive</code>.
== See also ==
== See also ==
 +
* [[unmonitorEvents]]
* [[Command Line API]]
* [[Command Line API]]
 +
 +
[[Category:Firebug]]
 +
[[Category:UI]]
 +
[[Category:API]]

Latest revision as of 00:06, 22 November 2013

Turns on logging for all or specific events dispatched to an object.

Contents

[edit] Syntax

monitorEvents(object[, types])

[edit] Parameters

[edit] object

Object to log events for. (required)

[edit] types

Event type(s) to log. This can be a single event type or an array of event types. (optional)

Besides supporting all normal events Firebug and Web Inspector offer a bunch of event groups, which combine several event types.

[edit] Event groups

Group Included events in Firebug Included events in Web Inspector
composition composition, compositionend, compositionstart -
contextmenu contextmenu -
control - blur, change, focus, reset, resize, scroll, select, submit, zoom
drag dragdrop, dragenter, dragexit, draggesture, dragover -
focus blur, focus -
form change, input, reset, selectsubmit -
key keydown, keypress, keyup keydown, keypress, keyup, textInput
load abort, beforeunload, error, load, unload -
mouse click, dblclick, mousedown, mousemove, mouseup, mouseout, mouseover click, dblclick, mousedown, mousemove, mouseup, mouseout, mouseover, mousewheel
mutation DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified -
paint paint, resize, scroll -
scroll overflow, underflow, overflowchanged -
text text -
touch touchstart, touchend, touchmove, touchenter, touchleave, touchcancel (since Firebug 1.11) touchstart, touchend, touchmove, touchcancel
ui DOMActivate, DOMFocusIn, DOMFocusOut -
xul popupshowing, popupshown, popuphiding, popuphidden, close, command, broadcast, commandupdate -
clipboard cut, copy, paste -

[edit] Examples

monitorEvents(document.body)

This will monitor all events occurring to the <body> element.

monitorEvents(document.getElementsByTagName("input")[0], "keydown")

This will monitor all keydown events occurring to the first <input> element.

monitorEvents(document.getElementById("interactive"), "mouse")

This will monitor all mouse events (click, dblclick, mousedown, mousemove, mouseup, mouseout and mouseover) occurring to the element with the id interactive.

monitorEvents(document.getElementById("interactive"), ["mouse", "keyup", "keydown"])

This will monitor all mouse events (click, dblclick, mousedown, mousemove, mouseup, mouseout and mouseover) plus all keyup and keydown events occurring to the element with the id interactive.

[edit] See also

Personal tools