From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/api/window/resize_event/index.html | 190 +++++++++++++++++++++ 1 file changed, 190 insertions(+) create mode 100644 files/pt-br/web/api/window/resize_event/index.html (limited to 'files/pt-br/web/api/window/resize_event') diff --git a/files/pt-br/web/api/window/resize_event/index.html b/files/pt-br/web/api/window/resize_event/index.html new file mode 100644 index 0000000000..ac5214b5a2 --- /dev/null +++ b/files/pt-br/web/api/window/resize_event/index.html @@ -0,0 +1,190 @@ +--- +title: resize +slug: Web/API/Window/resize_event +translation_of: Web/API/Window/resize_event +--- +

O evento resize é disparado quando o document view é redimensionado.

+ +

O evento manipulador pode ser registrado para o evento resize usando o atributo window.onresize ou usando window.addEventListener('resize', ...) 

+ +

Em alguns browsers mais recentes é possível registrar o evento manipulador resize em qualquer elemento HTML.  E ainda é possível adicionar atributos onresize ou usar {{domxref("EventTarget.addEventListener", "addEventListener()")}} para implementar o manipulador em qualquer elemento.  Entretanto, eventos resize  apenas são disparados sobre (enviados para) o objeto {{domxref("Window", "window")}} ({{domxref("document.defaultView")}}). Apenas manipuladores registrados no objeto window recebem os eventos.

+ +

Existe uma nova proposta (2017) para permitir que todos os elementos sejam notificados de alterações de tamanho.  Veja Resize Observer para ler o documento rascunho, e Github issues para ler as discussões do que está ativo.

+ +

Informações gerais

+ +
+
Specifications
+
DOM L3, CSSOM View
+
Interface
+
UIEvent
+
Bubbles
+
Não
+
Cancelable
+
Não
+
Target
+
defaultView (window)
+
Default Action
+
Nenhuma
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetO evento alto (o primeiro alvo na árvore DOM).
type {{readonlyInline}}DOMStringO tipo de evento.
bubbles {{readonlyInline}}BooleanSe o evento normalmente bubbles ou não.
cancelable {{readonlyInline}}BooleanSe o evento é cancelado ou não.
view {{readonlyInline}}WindowProxydocument.defaultView (window do documento)
detail {{readonlyInline}}long (float)0.
+ +

Examples

+ +

Como os eventos resize podem ser altamente executados, o evento manipulador não deve executar operações computacionais caras como modificações DOM. Em vez disso, recomenda-se diminuir o impacto do evento usando requestAnimationFrame, setTimeout ou customEvent*, como a seguir:
+
+ * IMPORTANT: Por favor note que IE11 precisa do customEvent polyfill para funcionar corretamente.

+ +

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
+    ...
+  }
+
+}());
-- cgit v1.2.3-54-g00ecf