这篇翻译不完整。请帮忙从英语翻译这篇文章。
resize
event 当文档视图被调整大小时触发。
General info
- Specifications
- DOM L3, CSSOM View
- Interface
- UIEvent
- Bubbles
- No
- Cancelable
- No
- Target
- defaultView (window)
- Default Action
- None
Properties
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. |
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 ... } }());