我們的志工尚未將此文章翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
The resize
event is fired when the document view has been resized.
General info
- Specifications
- DOM L3, CSSOM View
- Interface
- UIEvent
- Bubbles
- No
- Cancelable
- No
- Target
- defaultView (window)
- Default Action
- None
Properties
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
view Read only |
WindowProxy |
document.defaultView (window of the document) |
detail Read only |
long (float ) |
0. |
Examples
Since resize
events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame, setTimeout or customEvent, as follows:
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 ... } }());
文件標籤與貢獻者
標籤:
此頁面的貢獻者:
Cameron637,
Tigt,
poacher2k,
cvrebert,
pantherCZ,
codeboy,
teoli,
torbasow,
Brettz9,
kgreen,
raphaelstary,
Sheppy,
ethertank,
louisremi
最近更新:
Cameron637,