resize
======

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 `addEventListener()` para implementar o manipulador em qualquer elemento. Entretanto, eventos `resize` apenas são disparados sobre (enviados para) o objeto `window` (`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
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | O evento alto (o primeiro alvo na árvore DOM). |
| `type` Somente leitura  | `DOMString` | O tipo de evento. |
| `bubbles` Somente leitura  | `Boolean` (en-US) | Se o evento normalmente bubbles ou não. |
| `cancelable` Somente leitura  | `Boolean` (en-US) | Se o evento é cancelado ou não. |
| `view` Somente leitura  | `WindowProxy` | `document.defaultView` (`window` do documento) |
| `detail` Somente leitura  | `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 (en-US), setTimeout (en-US) ou customEvent (en-US)\*, como a seguir:

**\* IMPORTANT:** Por favor note que IE11 precisa do customEvent (en-US) polyfill para funcionar corretamente.

### requestAnimationFrame + customEvent


```js
(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


```js
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


```js
(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
    ...
  }

}());
```