Gecko-Specific DOM Events

DOMFrameContentLoaded

Same as DOMContentLoaded , but also fired for enclosed frames.

DOMWindowClose

Fired when the window is about to be closed by window.close() . See bug 103452 .

Requires Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

MozAfterPaint

The MozAfterPaint event is fired whenever content is repainted.  It is sent to the document and bubbles up to the window level.

MozAfterPaint has two attributes:

  • clientRects
  • boundingClientRect

These tell you what area was repainted, using the same objects and coordinate system as the getClientRects() and getBoundingClientRect() methods.

Important notes

  • MozAfterPaint is a Gecko-only event, and for compatibility (and performance) reasons should not be used outside chrome code, such as extensions.
  • For security reasons, regular Web content is only notified of repainting that occurred in its own document.  Repainting caused by iframes is not reported to untrusted listeners.  Listeners added by trusted content, such as extensions or other chrome code, are notified of all repaints.
  • If your event handler does anything that triggers repainting, such as changing the style of an element, you will probably trigger an infinite loop.  So please don't do that.
  • Repainting of areas scrolled outside the viewport is reported, but repainting of areas scrolled outside overflow:auto elements and the like is not.
  • Repainting in windowed plugins (which is most plugins on Windows and GTK) is not reported.

Gecko 2.0 note
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

The MozAfterPaint event is no longer sent to web content by default for the time being; it is still sent to chrome, however (there is a potential security issue; see bug 608030  for details). Until that's resolved, you can enable delivery of MozAfterPaint by setting the preference dom.send_after_paint_to_content to true.

Possible uses

There are several situations in which MozAfterPaint can be useful.  For example, you can use it in an extension that wants to capture the contents of a window using it in tandem with the canvas.drawWindow() method.  You can also use it while testing web content to add JavaScript instrumentation to measure what gets painted by Firefox and when, in order to optimize your site.

Example

This example adjusts the background color of elements that get painted, making them increasingly darker red each time they're updated.

(function(){
  var store = [];

  window.addEventListener("MozAfterPaint", log, false);

  if ( document.body )
    bind();
  else
    window.addEventListener("load", bind, false);

  function log(e){
    store.push( [(new Date).getTime(), e.clientRects] );
  }

  function bind(){
    document.body.addEventListener("click", function(){
      window.removeEventListener("MozAfterPaint", log, false);

      for ( var pos = 0; pos < store.length; pos++ ) {
        var rects = store[pos][1];

        for ( var i = 0; i < rects.length; i++ ) {
          var rect = rects[i];
          var div = document.createElement("div");

          with (div.style) {
            background = "red";
            opacity = "0.1";
            position = "absolute";
            top = rect.top + "px";
            left = rect.left + "px";
            width = (rect.right - rect.left) + "px";
            height = (rect.bottom - rect.top) + "px";
          }

          document.body.appendChild( div );
        }
      }

      document.body.removeEventListener("click", arguments.callee, false);
    }, false);
  }
})();

The most interesting bits of this example:

  • Line 4 installs the event listener to watch for MozAfterPaint events; when the event fires, the log() function gets called.
  • Lines 11-13 contain the log() function, which pushes the rectangle list for each update onto a stack for later reference; the actual DOM changes are done after the logging is complete, in order to avoid an infinite loop caused by repaints while logging repaints.
  • Line 16 installs a click event listener.  When the user finishes mousing around the window, causing repaints as they hover over various elements, clicking the mouse will cause the actual drawing of the results.
  • Line 17, the first line of the click event handler, removes the MozAfterPaint event handler.  This is done before any changes to the document in order to avoid the previously-mentioned infinite loop problem.
  • Lines 19-37 add div elements to the DOM for each painted rectangle, overlaying them on top of the painted content with a pale, translucent red background.

To use this example, you can create a bookmarklet containing the following code:

javascript:(function(s){s.src='http://developer.mozilla.org/@api/deki/files/2937/=track.js';document.body.appendChild(s);})(document.createElement('script'));

DOMMouseScroll

The DOMMouseScroll event is sent when the mouse wheel is moved. The target of this event is the element that was under the mouse pointer when the mouse wheel was scrolled, similar to the click event.

The most important attributes of a DOMMouseScroll event are detail and axis:

  • detail specifies the number of “ticks” that the mouse wheel moved. Positive values mean “down” / “right”, negative “up” / “left”.
  • axis specifies the axis of the scroll gesture (horizontal or vertical). This attribute was added in Firefox 3.5 ( bug 378028 ).

In addition to these attributes, DOMMouseScroll events also have all the attributes of a regular mouse event.

Starting in Gecko 1.9.2, this is correctly classified as a mouse event, so that event properties are available. See nsIDOMMouseScrollEvent  for details on the changes to inheritance.

Determining the scroll direction

If e is a DOMMouseScroll event, e.axis will be equal to:

  • undefined prior to Firefox 3.5,
  • e.HORIZONTAL_AXIS for horizontal scroll movement or
  • e.VERTICAL_AXIS for vertical scroll movement.

MozMousePixelScroll

Firefox 3.5 note

The MozMousePixelScroll event was added in Firefox 3.5 (Gecko 1.9.1).

Regular mouse wheels can only scroll with a per-line resolution. However, there are also devices that support scrolling with pixel precision, notably Apple MacBook trackpads.

When we started supporting pixel scrolling in bug 350471 , we added the MozMousePixelScroll event. It basically works exactly like DOMMouseScroll, with the difference that the detail attribute is in pixels (instead of lines).

For backwards compatibility DOMMouseScroll events are sent even if pixel scrolling is used. Every DOMMouseScroll event can have several associated MozMousePixelScroll events. If preventDefault() is called on the DOMMouseScroll event, the following associated MozMousePixelScroll events won't cause any scrolling.

When you listen for MozMousePixelScroll events, you shouldn't handle DOMMouseScroll events - otherwise you'd end up processing the same scroll gesture twice. In order to make it possible to only listen for MozMousePixelScroll events, Gecko will send MozMousePixelScroll events even when scrolling with regular mouse wheels. These events will carry a meaningful pixel delta.

See the comment in the code for details on the event flow.

Mouse gesture events

See Mouse gesture events for documentation on the following events:

  • MozSwipeGesture
  • MozMagnifyGestureStart
  • MozMagnifyGestureUpdate
  • MozMagnifyGesture
  • MozRotateGestureStart
  • MozRotateGestureUpdate
  • MozRotateGesture

Others

There appear to be many other sparsely documented events. See bug 286013 :

  • DOMLinkAdded (when a <link/> element is added to the page; e.g., used internally for processing RSS)
  • DOMLinkRemoved
  • DOMMetaAdded
  • DOMMetaRemoved
  • DOMWillOpenModalDialog
  • DOMModalDialogClosed
  • fullscreen
  • PopupWindow
  • DOMTitleChanged
  • PluginNotFound
  • ValueChange
  • DOMMenuItemActive
  • windowZLevel

Example

window.addEventListener("DOMFrameContentLoaded", myeventhandler, true);

Tags (3)

Edit tags

Attachments (1)

FileSizeDateAttached by 
 track.js
No description
1106 bytes12:04, 14 Oct 2008SheppyActions

Attach file