调整大小(resize)事件_H5之家 - 中国HTML5教程资源分享第一站

当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。这个事件在window（窗口）上面触发，一次可以通过JavaScript或者<body>元素中的onresize特性来指定事件处理程序。

var EventUtil = {
 addHandler: function (element, type, handler) {
 if (element.addEventListener) {
 element.addEventListener(type, handler, false);
 } else if (element.attachEvent) {
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 }
 }
};
EventUtil.addHandler(window, "resize", function () {
 alert("Resized");
});

与其他发生在window上的事件类似，在兼容DOM的浏览器中，传入事件处理程序中的event对象有一个targer属性，值为document；而IE则未提供任何属性关于何时会触发resize事件，不同浏览器有不同的机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。由于存在这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反映明显变慢。

浏览器窗口最大化时也会触发resize事件。