EventTarget事件:resize

2019-01-25 15:32 更新

EventTarget事件 - resize

调整文档视图(窗口)的大小时将触发resize事件。

在某些早期的浏览器中,可以在任何HTML元素上注册resize事件处理程序。仍然可以设置onresize属性或使用addEventListener()在任何元素上设置处理程序。但是,resize事件仅在window对象(document.defaultView)上触发(发送)。只有在window对象上注册的处理程序才会收到事件。

有一个新提案(2017)允许所有元素通知调整大小更改。

基本信息

接口UIEvent
是否冒泡没有
是否可取消没有
目标Document.defaultViewwindow
默认操作没有

属性

属性类型描述
target(只读)EventTarget事件目标(DOM树中最顶层的目标)。
type(只读)DOMString事件的类型。
bubbles(只读)Boolean事件是否正常冒泡。
cancelable(只读)Boolean事件是否可以取消。
view(只读)WindowProxyDocument.defaultViewwindow文件)
detail(只读)longfloat0

示例

您可以使用window.onresize或window.addEventListener('resize',...)为resize事件注册事件处理程序。

由于resize事件可以以高速率触发,因此事件处理程序不应执行计算上昂贵的操作,例如DOM修改。相反,建议使用requestAnimationFrame(),setTimeout()或CustomEvent来限制事件,如下所示。

重要提示:请注意IE11需要customEvent() polyfill才能正常运行。

requestAnimationFrame + customEvent

(function() {
  var throttle = function(type, name, obj) {
    obj = obj || window;
    var running = false;
    var func = function() {
      if (running) { return; }
      running = true;
      requestAnimationFrame(function() {
        obj.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    obj.addEventListener(type, func);
  };

  /* init - you can init any event */
  throttle("resize", "optimizedResize");
})();

// handle event
window.addEventListener("optimizedResize", function() {
  console.log("Resource conscious resize callback!");
});

requestAnimationFrame

var optimizedResize = (function() {

  var callbacks = [],
      running = false;

  // fired on resize event
  function resize() {
    if (!running) {
      running = true;

      if (window.requestAnimationFrame) {
        window.requestAnimationFrame(runCallbacks);
      } else {
        setTimeout(runCallbacks, 66);
      }
    }
  }

  // run the actual callbacks
  function runCallbacks() {
    callbacks.forEach(function(callback) {
      callback();
    });

    running = false;
  }

  // adds callback to loop
  function addCallback(callback) {
    if (callback) {
      callbacks.push(callback);
    }
  }

  return {
    // public method to add additional callback
    add: function(callback) {
      if (!callbacks.length) {
        window.addEventListener('resize', resize);
      }
      addCallback(callback);
    }
  }

}());

// start process
optimizedResize.add(function() {
  console.log('Resource conscious resize callback!')
});

setTimeout

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
     
       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    ...
  }

}());

规范

  • DOM L3
  • CSSOM视图
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号