We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

Nos bénévoles n'ont pas encore traduit cet article en Français. Inscrivez-vous et aidez-nous à réaliser cette tâche !
Vous pouvez également lire cet article en English (US).

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

An event handler can be registered for the resize event using attribute window.onresize or using window.addEventListener('resize', ...) 

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

defaultView (window)
Default Action


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.


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:

* 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


Étiquettes et contributeurs liés au document

 Dernière mise à jour par : Fangfeidenimen,