mozilla
Your Search Results

    resize

    The resize event is fired when the document view has been resized.

    General info

    Specification
    DOM L3
    Interface
    UIEvent
    Bubbles
    No
    Cancelable
    No
    Target
    defaultView (window)
    Default Action
    None

    Properties

    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 Does the event normally bubble?
    cancelable Read only boolean Is it possible to cancel the event?
    view Read only WindowProxy document.defaultView (window of the document)
    detail Read only long (float) 0.

    Example

    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 customEvent, as follows:

    requestAnimationFrame + customEvent

    ;(function() {
        var throttle = function(type, name, obj) {
            var 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
        ...
      }
    
    }());
    

    Document Tags and Contributors

    Last updated by: pantherCZ,