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