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

Question

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

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

window.onresize = resize;

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

Разве это не уничтожило бы все другие функции, который подключен к тому же событию, и просто зарегистрируйте мое сообщение в консоли?

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

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

19

javascript javascript-events event-handling

задан Cœur 16 April 2017 в 07:24

2 ответа

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

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

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

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

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

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

6

ответ дан 30 November 2019 в 02:36

Другие вопросы по тегам:

javascript javascript-events event-handling

Похожие вопросы:

score 14 · Accepted Answer

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

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 (если что-то было).