Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Событие resize запускается, когда размер документа был изменён.

Основаная информация

Спецификаци
DOM L3, CSSOM View
Интерфейс
UIEvent
Bubbles
Нет
Отмена
Нет
Цель
вид по умолчанию (window)
Действие по умолчанию
Нет

 

Синтаксис

Свойство Тип Описание
target Только для чтения EventTarget Цель события (самая важная в дереве DOM).
type Только для чтения DOMString Тип события.
bubbles Только для чтения Boolean Будет ли событие нормально бить
cancelable Только для чтения Boolean Отменяемо ли событие?
view Только для чтения WindowProxy document.defaultView (window документа)
detail Только для чтения long (float) 0.

Примеры

Так как события изменения размера могут срабатывать с высокой скоростью, обработчик событий не должен выполнять дорогостоящие операции, такие как модификации DOM. Вместо этого рекомендуется регулировать событие, используя requestAnimationFrame, setTimeout или customEvent *, следующим образом:

* ВАЖНО: Обратите внимание, что для работы в IE11 необходимо, чтобы customEvent заполнялся в функцию правильно.

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

}());

Метки документа и участники

 Внесли вклад в эту страницу: ValeriaAleksandrovna
 Обновлялась последний раз: ValeriaAleksandrovna,