JavaScript窗口调整大小事件

如何挂钩浏览器窗口调整大小事件？

有一种侦听调整大小事件的jQuery方式，但我不但愿仅出于这一要求就将其引入个人项目中。

---

#1楼

window.onresize = function() {
    // your code
};

---

#2楼

首先，我知道上面的注释中已经提到了addEventListener方法，可是我没有看到任何代码。 因为这是首选方法，所以它是：

window.addEventListener('resize', function(event){
  // do stuff here
});

这是一个工做样本 。

---

#3楼

感谢您在http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html中引用个人博客文章。

虽然您能够链接到标准窗口调整大小事件，但您会发如今IE中，该事件每X触发一次，每Y轴移动触发一次，从而致使触发大量事件，这些事件可能具备必定的性能若是渲染是一项繁重的任务，则会对您的网站产生影响。

个人方法涉及一个短暂的超时，该超时将在后续事件中取消，以便在用户完成调整窗口大小以前，该事件不会冒泡到您的代码中。

---

#4楼

若是您只想调整窗口和窗口的大小，则上面已经提到的解决方案将起做用。 可是，若是您但愿将调整大小传播到子元素，则须要本身传播事件。 这是一些示例代码：

window.addEventListener("resize", function () {
  var recResizeElement = function (root) {
    Array.prototype.forEach.call(root.childNodes, function (el) {

      var resizeEvent = document.createEvent("HTMLEvents");
      resizeEvent.initEvent("resize", false, true);
      var propagate = el.dispatchEvent(resizeEvent);

      if (propagate)
        recResizeElement(el);
    });
  };
  recResizeElement(document.body);
});

请注意，子元素能够调用

event.preventDefault();

在做为调整大小事件的第一个Arg传入的事件对象上。 例如：

var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
  ...
  event.preventDefault();
});

---

#5楼

切勿覆盖window.onresize函数。

而是，建立一个将事件侦听器添加到对象或元素的函数。 这会检查并防止侦听器不起做用，而后做为最后手段重写该对象的功能。 这是在jQuery之类的库中使用的首选方法。

object ：元素或窗口对象
type ：调整大小，滚动（事件类型）
callback ：函数参考

var addEvent = function(object, type, callback) {
    if (object == null || typeof(object) == 'undefined') return;
    if (object.addEventListener) {
        object.addEventListener(type, callback, false);
    } else if (object.attachEvent) {
        object.attachEvent("on" + type, callback);
    } else {
        object["on"+type] = callback;
    }
};

而后使用是这样的：

addEvent(window, "resize", function_reference);

或具备匿名功能：

addEvent(window, "resize", function(event) {
  console.log('resized');
});