The resize event fires when the document view (window) has been resized.

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on (sent to) the window object (document.defaultView). Only handlers registered on the window object will receive events.

There is a new proposal (2017) to allow all elements to be notified of resize changes. See Resize Observer to read the draft document, and GitHub issues to read the on-going discussions.

General info

Interface UIEvent
Bubbles No
Cancelable No
Targets Document.defaultView (window)
Default Action None


Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not.
cancelable Read only Boolean Whether the event is cancellable or not.
view Read only WindowProxy Document.defaultView (window of the document)
detail Read only long (float) 0.


You can register an event handler for the resize event using either window.onresize or window.addEventListener('resize', ...).

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 a CustomEvent, as follows.

Important: Please note that IE11 needs the customEvent() polyfill to function correctly.

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!");


var optimizedResize = (function() {

  var callbacks = [],
      running = false;

  // fired on resize event
  function resize() {
    if (!running) {
      running = true;

      if (window.requestAnimationFrame) {
      } else {
        setTimeout(runCallbacks, 66);

  // run the actual callbacks
  function runCallbacks() {
    callbacks.forEach(function(callback) {

    running = false;

  // adds callback to loop
  function addCallback(callback) {
    if (callback) {

  return {
    // public method to add additional callback
    add: function(callback) {
      if (!callbacks.length) {
        window.addEventListener('resize', resize);


// start process
optimizedResize.add(function() {
  console.log('Resource conscious resize callback!')


(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;
       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);

  function actualResizeHandler() {
    // handle the resize event



See also

Document Tags and Contributors

Last updated by: mfluehr,