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

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

19 голосов
/ 27 июля 2010

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

window.onresize = resize;

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

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

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

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

Ответы [ 3 ]

31 голосов
/ 23 июня 2013

Вместо замены такого универсального обработчика, вы должны просто добавить слушатель 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);
}
14 голосов
/ 27 июля 2010

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

var oldResize = window.onresize;

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

У этого метода могут быть проблемы, если есть несколько функций одного размера.Вы можете сохранить старую функцию 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 (если что-то было).

6 голосов
/ 27 июля 2010

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

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

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

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

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

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

...