Gecko 固有の DOM Event

DOMContentLoaded

文書の DOM コンテンツが読み終わったとき window オブジェクト上で発生します。しかし、"load" とは異なり画像が読み込まれるのを待ちません。例えば、GraeseMonkey でページが表示される前に変更をこっそり行うために使われます。

このイベントは、このページの他の多くのイベントのように、"信頼された" 対象のみに通達されます。例えば、Firefox におけるメインブラウザオブジェクトのコンテンツには、たとえ、chrome:/ URI からのものであっても、通達されません。

DOMFrameContentLoaded

上記と同じですが、フレーム内のコンテンツが読み込まれた時に発生します。

DOMWindowClose

window.close() によって、ウィンドウを閉じようとしている時に発生します。詳しくは バグ 103452 をご覧ください。

MozAfterPaint

MozAfterPaint イベントはコンテントが再描画されたときに発生します。このイベントは document に送られ window レベルまで bubble します。

MozAfterPaint は 2 つの属性を持ちます:

• clientRects
• boundingClientRect

これらは再描画された領域について教えてくれます。getClientRects() と getBoundingClientRect() メソッドと同じオブジェクトと座標系が使われます。

重要な注意

• MozAfterPaint は Gecko 独自のイベントです。互換性 (とパフォーマンス) の面から、このイベントは拡張機能のような chrome のコードでのみ使うべきです。
• セキュリティ上の理由から、通常の Web コンテントは自分自身の document で発生した再描画のみが通知されます。iframe によって発生した再描画は、信用されていないリスナには報告されません。拡張機能やその他の chrome のコードのような信用されたコンテントには全ての再描画が通知されます。
• もしイベントハンドラが、要素のスタイルを変更するなどして、再描画を発生させるとおそらく無限ループが発生します。そのようなことはやめましょう。
• ビューポートの外にスクロールした領域の再描画は報告されますが、overflow:auto であるような要素の外にスクロールした再描画は報告されません。
• windowed プラグイン (Windows と GTK における大半のプラグイン) の再描画は報告されません。

想定される利用

MozAfterPaint が有用である状況はいくつかあります。例えば、canvas.drawWindow() を使って、ウィンドウの内容をキャプチャする拡張機能の中で使うことができます。 Web コンテンツをテストする間、Firefox によって何がいつ描画されたか計る JavaScript 計測コードを書くのに使うこともできます。

例

この例は描画された要素の背景を、更新されるたびに徐々に暗い赤に調整していきます。

(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);
  }
})();

この例の最も興味深いところは:

• 4 行目は MozAfterPaint イベントを監視するイベントリスナをインストールしています。イベントが発生すると log() 関数が呼びだされます。
• 11 から 13行目は log() 関数を含んでいます。これは更新ごとに (再描画領域の) 矩形リストを後で参照するためにスタックに積んでいます。DOM に対する実際の変更はロギングが完了してから行います。これはロギングによる再描画が引きおこす無限ループを避けるためです。
• 16 行目は click イベントリスナをインストールしています。マウスが様々な要素の上に重なると再描画が発生します。ウィンドウ中をマウスで動きまわるのをやめたいときは、マウスをクリックすると実際に結果が表示されます。
• 17 行目は click イベンントリスナの最初の行で、MozAfterPaint イベントハンドラを削除しています。先ほど言及した無限ループの問題を避けるために、これはドキュメントに変更を加える前に行います。
• 19 から 37 行目は、描画された矩形について div 要素を DOM に追加しています。それらは薄い透明な赤い背景を持っており、描画されているコンテントの上に重ねられます。

この例を使うために以下のコードを含んだブックマークレットを作ることができます:

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

DOMMouseScroll

DOMMouseScroll イベントはマウスホイールが動いたときに送られます。このイベントのターゲットは、click イベントと同じように、マウスホイールがスクロールされたときマウスポインタの下にいた要素です。

DOMMouseScroll イベントの最も重要な属性はdetail と axis です:

• detail はマウスホイールの移動した「目盛」の数を特定します。正の値は「下」/「右」を意味し、負の値は「上」/「左」を意味します。
• axis はスクロール動作の軸を特定します (水平または垂直)。この属性は Firefox 3.5 で追加されました (バグ 378028)。

これらの属性に加えて、DOMMouseScroll イベントは通常のマウスイベントの属性も全て持っています。

スクロール方向の特定

e を DOMMouseScroll イベントとすると、e.axis は以下のいずれかと等しくなります:

• undefined - Firefox 3.5 未満
• e.HORIZONTAL_AXIS - 水平方向のスクロール移動
• e.VERTICAL_AXIS - 垂直方向のスクロール移動

MozMousePixelScroll

通常のマウスホイールは行単位でしかスクロールできません。しかし、特に Apple MacBook トラックパッドのような、ピクセル精度のスクロールをサポートしたデバイスも存在します。

バグ 350471 でピクセルスクロールのサポートを始めたとき、我々は MozMousePixelScroll イベントを追加しました。これは基本的に DOMMouseScroll と同じですが、detail 属性が (行単位ではなく) ピクセル単位であることが違っています。

後方互換性のためにピクセルスクロールが使われたとしても DOMMouseScroll イベントも送られます。全ての DOMMouseScroll イベントはいくつかの関連づけられた MozMousePixelScroll を持つことができます。もし DOMMouseScroll に対して preventDefault() が呼ばれたら、続く関連づけられた MozMousePixelScroll イベントはスクロールを発生させません。

MozMousePixelScroll イベントを listen する時は DOMMouseScroll を処理すべきではありません。そうしないと同じスクロール動作を 2 度処理する羽目になるでしょう。MozMousePixelScroll イベントだけを listen できるように Gecko は通常のマウスホイールによるスクロールに対しても MozMousePixelScroll を送ります。それらのイベントは意味あるピクセル変化量を提供します。

イベントの流れの詳細は コードのコメント を参照してください。

その他

その他にも使用できるイベントがあります。詳しくは バグ 286013 をご覧ください:

• DOMLinkAdded
• DOMLinkRemoved
• DOMWillOpenModalDialog
• DOMModalDialogClosed
• fullscreen
• PopupWindow
• DOMTitleChanged
• PluginNotFound
• ValueChange
• DOMMenuItemActive
• windowZLevel

例

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

参照

Event Handlers、DOM Events