EventTarget事件:resize
EventTarget事件 - resize
调整文档视图(窗口)的大小时将触发resize事件。
在某些早期的浏览器中,可以在任何HTML元素上注册resize事件处理程序。仍然可以设置onresize属性或使用addEventListener()在任何元素上设置处理程序。但是,resize事件仅在window对象(document.defaultView)上触发(发送)。只有在window对象上注册的处理程序才会收到事件。
有一个新提案(2017)允许所有元素通知调整大小更改。
基本信息
接口 | UIEvent |
---|---|
是否冒泡 | 没有 |
是否可取消 | 没有 |
目标 | Document.defaultView (window ) |
默认操作 | 没有 |
属性
属性 | 类型 | 描述 |
---|---|---|
target (只读) | EventTarget | 事件目标(DOM树中最顶层的目标)。 |
type (只读) | DOMString | 事件的类型。 |
bubbles (只读) | Boolean | 事件是否正常冒泡。 |
cancelable (只读) | Boolean | 事件是否可以取消。 |
view (只读) | WindowProxy | Document.defaultView (window 文件) |
detail (只读) | long (float ) | 0 。 |
示例
您可以使用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视图