Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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

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

}());

Etiquetas do documento e colaboradores

 Colaboradores desta página: sergio_orugian
 Última atualização por: sergio_orugian,