Was ist die beste übung, um nicht zu überschreiben gebundenen Funktionen-Fenster.onresize?

Wie viel ich Grabe in JavaScript, fragte ich mich, dass viel. Zum Beispiel haben wir window.onresize event-handler, und wenn ich sage:

window.onresize = resize;

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

Wäre das nicht, töten Sie alle anderen Funktionen, die mit der gleichen Veranstaltung und melden Sie sich einfach meine Nachricht in der Konsole?

Wenn ja, ich denke, es sollte ein weiterer Melder die sagt mir über Fenster resize-Ereignis - oder ein workaround vielleicht - ohne überschreiben von Funktionen, die gebunden sind, auf dasselbe Ereignis.

Oder bin ich Total verwirrt durch seine Nutzung?

InformationsquelleAutor KakambaWeb | 2010-07-26
  1. 14

    Können Sie das alte onresize-Funktion und rufen, dass entweder vor oder nach Ihre custom resize-Funktion. Ein Beispiel, das sollte funktionieren, wäre so etwas wie dieses:

    var oldResize = window.onresize;

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

    Diese Methode kann Probleme haben, wenn es mehrere onresize Funktionen. Sie könnten die alte onresize-Funktion, die als Teil einer Verschluss-und rufen die alte, nachdem Sie Ihre Funktion. 

    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);

    Beim Aufruf addResizeEvent, übergeben Sie es eine Funktion, die Sie registrieren möchten. Es nimmt das alte resize-Funktion und speichert es als oldResize. Bei der Größe passiert, es wird die Funktion aufrufen und dann aufrufen, das alte resize-Funktion. Sie sollten in der Lage sein, um hinzuzufügen, wie viele Anrufe, wie Sie möchten.

    In diesem Beispiel, wenn ein Fenster ändert, wird es call bar, dann foo, dann, was gespeichert wurde, im Fenster.Größe ändern (wenn es etwas).

    • nice one Buddy Dank 🙂
    InformationsquelleAutor Buddy
  2. 31

    Anstatt Sie zu ersetzen eine solche catch-all-handler, Sie sollten nur hinzufügen eine DOM-2 Hörer wie diese:

    window.addEventListener("resize", myResizeFunction);

    oder in mehr details:

    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);
}
    • Wow, das ist viel sauberer und flexibler. Schön!
    InformationsquelleAutor Javarome
  3. 6

    Einer Weise zu tun, es ist so:

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

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

    Oder Sie können etwas wie jQuery die wraps all das Zeug in ein viel einfacheres Konstrukt:

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

    Automatisch verarbeitet mehrere Handler und Sachen für Sie.

    • cool, danke für die Antwort. Sie haben keine Ahnung, wie jquery funktioniert, dass, bc, was will ich eigentlich lernen, ist, dass?
    • jQuery arbeitet, indem er die eigene interne Liste der "attached" - Handler und überschreiben dann die onresize-handler mit einer Schleife durch die Liste und ruft Ihnen ein-by-one.
    InformationsquelleAutor Dean Harding
Schreibe einen Kommentar