w3ctech

【译】Gecko-特定DOM事件

原文链接

DOMFrameContentLoaded

等同于DOMContentLoaded,封闭frames也会触发。

DOMWindowClose

调用window.close()关闭窗口时触发。见bug 103452

MozAfterPaint

注:需要Gecko 1.9.1(火狐3.5/雷鸟3.0/海猴2.0)

每当内容被重绘,触发MozAfterPaint事件。该事件会被发送到document并且冒泡到窗口。

MozAfterPaint有两个属性:

  • clientRects
  • boundingClientRect

与调用getClientRects()getBoundingClientRect()方法使用的对象和坐标系统相同,它们可以告诉你哪块区域被重绘。

重要提示

  • MozAfterPaint是一个Gecko的专有事件,考虑到兼容性(还有性能)的原因,请不要在chrome代码外(比如扩展中)使用。
  • 出于安全原因的考虑,常规的Web内容只能收到发生在自己文档内的重绘通知。iframes引起的重绘是不报告给不受信任的侦听器。通过可信的内容如扩展或其他chrome代码添加的侦听器,会收到所有重绘的通知。
  • 如果你的事件处理程序做了什么事件触发重绘,比如改变一个元素的样式,很可能会触发一个无限循环。所以请不要这样做。
  • 重绘滚动出视窗的区域会报告,但滚动出添加了overflow:auto元素的区域被重绘不报告。
  • 重绘窗口插件(主要是Windows和GTK的大多数插件)不报告。

Gecko 2.0 提示 (火狐4/雷鸟3.3/海猴2.1) 默认情况下MozAfterPaint事件暂时不再发送到网页内容,但还是会发送到chrome,然而(有一个潜在的安全问题,详情见bug608030)。在这个问题解决之前,可以通过设置首选项dom.send_after_paint_to_content为true,启用将MoZAfterPaint事件发送到网页内容。

使用场景

有几种情况下MozAfterPaint可能是有用的。比如应用于扩展中,用来在串行调用cavas.drawWindow()方法时捕获窗口的内容。也可以用于测试网页内容以优化网站,比如插入JavaScript代码来检测Firefox会向网页内容中绘制什么,以及何时绘制。

示例

这个例子中调整要被绘制的元素的背景色,每一次更新都使红色更深些。

(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行 插入点击事件监听器。当用户鼠标在各种元素上悬停时会引起重绘,点击鼠标将导致结果的实际绘制
  • 第17行 点击事件处理程序的第一行,移除MozAfterPaint事件的处理程序。在对文档的任何修改之前这样先移除它,是为了避免前面提到的无限循环的问题
  • 第19-37行 为每个重绘的矩形区的DOM添加div元素,在重绘的内容上覆盖一层半透明的红色背景。

要使用这个示例,包含下面的代码可以创建一个书签:

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

DOMMouseScroll

当鼠标滚轮移动时发送DOMMouseScroll事件。事件的目标是鼠标滚轮滚动时鼠标指针下的元素,与点击事件类似。

DOMMouseScroll事件最重要的属性是detail和axis:

  • detail反映鼠标滚轮滚动的"咔嗒"数。正值表示"向下"或"向右",负值表示"向上"或"向左"。
  • axis反映鼠标手势(水平或垂直)。这个属性在Firefox3.5中添加(bug 378028)。

除了这些属性,DOMMouseScroll事件也有普通鼠标事件的所有属性。

从Gecko1.9.1起,DOMMouseScroll事件正式地归类为鼠标事件,所以事件属性是可用的。见nsIDOMMouseScrollEvent了解继承变化的细节。

确定滚动的方向

如果e是DOMMouseScroll事件,e.axis将等于:

  • undefined (Firefox3.5之前版本)
  • e.HORIZOTAL_AXIS,表示水平滚动运动
  • e.VERTICAL_AXIS,表示垂直滚动运动

MozMousePixelScroll

Firefox3.5注意事项 MozMousePixelScroll事件在Firefox3.5(Gecko1.9.1)中添加

普通的鼠标滚轮只能按行滚动。然而也有支持像素级滚动的设备,特别是苹果笔记本触控板。

当我们在bug 350471中支持像素滚动时,添加了MozMousePixelScroll事件。该事件与DOMMouseScroll的工作原理基本相同,所不同的是detail属性采用像素替代了行。

为了向后兼容,像素滚动时也会发送DOMMouseScroll事件。每个DOMMosueScroll事件可以有多个相关的MozMousePixelScroll事件。如果在DOMMouseScroll事件中调用了preventDefault(),接下来相关的MozMousePixelScroll事件将不会造成任何滚动。

当监听MozMousePixelScroll事件时,不应该处理DOMMouseScroll事件,否则会处理相同的滚动行为两次。为了只监听MozMousePixelScroll事件,Gecko即使在普通的鼠标滚轮滚动时也会发送MozMouseScroll事件,这些事件将携带有意义的像素增量。

查看代码注释,以了解该事件流详细的情况。

鼠标手势事件

查看鼠标手势事件中关于以下事件的文档:

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

其他

还有许多事件可能查不到文档,见bug 286013:

  • DOMLinkAdded (当一个link元素被添加到页面时触发;内部用于处理RSS)
  • DOMLinkRemoved
  • DOMMetaAdded
  • DOMMetaRemoved
  • DOMWillOpenModalDialog
  • DOMModalDialogClosed
  • fullscreen
  • PopupWindow
  • DOMTitleChanged
  • PluginNotFound
  • ValueChange
  • DOMMenuItemActive
  • windowZLevel

示例:

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

另请参阅:

前端圈微信

扫码关注前端圈微信公众号

共收到0条回复