Qual è la procedura migliore per non sovrascrivere altre funzioni associate a window.onformare?

Question

Quanto scrivo in JavaScript, mi ritrovo a chiedere molto. Per esempio abbiamo window.onresize gestore di eventi e se dico:

window.onresize = resize; 

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

Non sarebbe uccidere tutte le altre funzioni che è collegato allo stesso evento e fare il login mio messaggio in console?

Se è così penso che ci dovrebbe essere un altro notificatore che mi parli dell'evento di ridimensionamento della finestra - o forse di una soluzione - senza sovrascrivere altre funzioni che sono legate allo stesso evento.

O sono totalmente confuso dal suo utilizzo?

Answer 1

È possibile salvare la vecchia funzione onresize e chiamarla prima o dopo la funzione di ridimensionamento personalizzato. Un esempio che dovrebbe funzionare sarebbe qualcosa di simile a questo:

var oldResize = window.onresize; 

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

Questo metodo può avere problemi se ci sono diverse funzioni onResize. Puoi salvare la vecchia funzione onresize come parte di una chiusura e chiamare quella vecchia dopo la tua funzione.

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

Quando si chiama addResizeEvent, si passa a una funzione che si desidera registrare. Prende la vecchia funzione di ridimensionamento e la memorizza come oldResize. Quando il ridimensionamento avviene, chiamerà la tua funzione e chiamerà la vecchia funzione di ridimensionamento. Dovresti essere in grado di aggiungere tutte le chiamate che desideri.

In questo esempio, quando una finestra ridimensiona, chiamerà barra, quindi pippo, quindi qualsiasi cosa sia stata memorizzata in window.resize (se c'era qualcosa).

Answer 2

Un modo per farlo è come questo:

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

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

Oppure si può usare qualcosa di simile jQuery che avvolge tutta quella roba in un costrutto molto più semplice:

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

che gestisce automaticamente più gestori e roba per te.

Answer 3

Invece di sostituire tale un catch-all handler, si dovrebbe solo aggiungere un DOM 2 listener come questo:

window.addEventListener("resize", myResizeFunction); 

o in ulteriori dettagli:

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