窗口大小改变事件 java_JavaScript窗口调整大小事件

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

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

#1楼

window.onresize = function() {

// your code

};

#2楼

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

window.addEventListener('resize', function(event){

// do stuff here

});

#3楼

虽然您可以连接到标准窗口调整大小事件，但您会发现在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');

});