--- title: Gecko 固有の DOM Event slug: Gecko-Specific_DOM_Events tags: - DOM - MDC Project - NeedsTechnicalReview translation_of: Web/Events ---

{{ 英語版章題("DOMContentLoaded") }}

DOMContentLoaded

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

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

{{ 英語版章題("DOMFrameContentLoaded") }}

DOMFrameContentLoaded

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

{{ 英語版章題("DOMWindowClose") }}

DOMWindowClose

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

MozAfterPaint

{{ fx_minversion_note(3.5, "The MozAfterPaint イベントは Firefox 3.5 (Gecko 1.9.1) で追加されました。") }}

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

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

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

重要な注意

想定される利用

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

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

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

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

DOMMouseScroll

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

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

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

スクロール方向の特定

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

MozMousePixelScroll

{{ fx_minversion_note(3.5, "MozMousePixelScroll イベントは Firefox 3.5 (Gecko 1.9.1) で追加されました。") }}

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

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

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

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

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

{{ 英語版章題("Others") }}

その他

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

{{ 英語版章題("Example") }}

例

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

{{ 英語版章題("See also") }}

参照

Event Handlers、DOM Events