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 Se o evento normalmente bubbles ou não.
cancelable Somente leitura Boolean 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, setTimeout ou customEvent*, como a seguir:

* IMPORTANT: Por favor note que IE11 precisa do customEvent 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
    ...
  }

}());