resize
Событие resize
срабатывает при изменении размера представления документа (окна).
В некоторых более ранних браузерах можно было зарегистрировать обработчики событий resize
на любом HTML-элементе. По-прежнему можно установить атрибуты onresize
или использовать addEventListener()
чтобы установить обработчик для любого элемента. Однако, событие resize
запускается только на объекте window
. Только обработчики, зарегистрированные на объекте window, будут получать события resize
.
Существует предложение разрешить всем элементам получать уведомления об изменениях размера. См. раздел Resize Observer, чтобы ознакомиться с проектом документа, и GitHub вопросы, чтобы ознакомиться с текущими обсуждениями.
Основная информация
- Спецификации
- Интерфейс
-
UIEvent
- Bubbles
-
Нет
- Отмена
-
Нет
- Цель
-
вид по умолчанию (window)
- Действие по умолчанию
-
Нет
Property | Type | Description |
---|---|---|
target Только для чтения |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Только для чтения |
DOMString |
The type of event. |
bubbles Только для чтения |
Boolean |
Whether the event normally bubbles or not. |
cancelable Только для чтения |
Boolean |
Whether the event is cancellable or not. |
view Только для чтения |
WindowProxy |
document.defaultView (window of the document) |
detail Только для чтения |
long (float ) |
0. |
Примеры
Так как события изменения размера могут срабатывать с высокой скоростью, обработчик событий не должен выполнять дорогостоящие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent *, следующим образом:
* ВАЖНО: Обратите внимание, что для работы в IE11 необходимо, чтобы customEvent заполнялся в функцию правильно.
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
...
}
}());