Какова наилучшая практика не переопределять другие связанные функции в window.onresize?

Сколько я копаю в JavaScript, я очень об этом спрашиваю. Например, у нас есть обработчик событий window.onresize, и если я говорю:

window.onresize = resize;

function resize()
{
  console.log("resize event detected!");
}

Не будет ли это убивать все другие функции, связанные с одним и тем же событием, и просто зарегистрировать мое сообщение в консоли?

Если это так, я думаю, что должен быть еще один уведомитель, который сообщает мне о событии изменения размера окна - возможно, обходной путь - без переопределения других функций, привязанных к одному событию.

Или меня полностью смущает его использование?

Ответы

Ответ 1

Вы можете сохранить старую функцию onresize и вызвать ее до или после пользовательской функции изменения размера. Пример, который должен работать, будет примерно таким:

var oldResize = window.onresize;

function resize() {
    console.log("resize event detected!");
    if (typeof oldResize === 'function') {
        oldResize();
    }
}
window.onresize = resize;

Этот метод может иметь проблемы, если есть несколько функций onresize. Вы можете сохранить старую функцию onresize как часть закрытия и вызвать старую после вашей функции.

function addResizeEvent(func) {
    var oldResize = window.onresize;
    window.onresize = function () {
        func();
        if (typeof oldResize === 'function') {
            oldResize();
        }
    };
}

function foo() {
    console.log("resize foo event detected!");
}

function bar() {
    console.log("resize bar event detected!");
}
addResizeEvent(foo);
addResizeEvent(bar);

Когда вы вызываете addResizeEvent, вы передаете ему функцию, которую вы хотите зарегистрировать. Он принимает старую функцию изменения размера и сохраняет ее как oldResize. Когда произойдет изменение размера, он вызовет вашу функцию, а затем вызовет функцию старого изменения размера. Вы должны иметь возможность добавлять столько звонков, сколько захотите.

В этом примере при изменении размера окна он вызовет bar, затем foo, затем все, что было сохранено в window.resize(если было что-то).

Ответ 2

Вместо замены такого обработчика catch-all вы должны просто добавить DOM 2 прослушиватель следующим образом:

window.addEventListener("resize", myResizeFunction);

или более подробно:

if (window.addEventListener) {    // most non-IE browsers and IE9
   window.addEventListener("resize", myResizeFunction, false);
} else if (window.attachEvent) {  // Internet Explorer 5 or above
   window.attachEvent("onresize", myResizeFunction);
}

Ответ 3

Один из способов сделать это:

function resize() { /* ... */ }

var existing = window.onresize;
window.onresize = function() {
    if (existing) {
        existing();
    }
    resize();
 }

Или вы можете использовать что-то вроде jQuery, которое обертывает все это в гораздо более простой конструкции:

$(window).resize(function() { /* ... */ });

Это автоматически обрабатывает несколько обработчиков и прочее для вас.