2016-01-27 27 views
11

In JavaScript, è il seguente codice:

window.onresize = function() { 
    // Do something. 
} 

Lo stesso di:

$(window).on('resize', function() { 
    // Do something. 
}); 

sono i due blocchi di codice di cui sopra la parità, funzionalità-saggio? C'è qualche vantaggio o svantaggio (comunque minore) nell'usare l'uno o l'altro?

Che dire:

window.addEventListener('resize', function(event) { 
    // Do something. 
}); 
+0

window.onresize è DOM $ (finestra). Su jQuery. Entrambi sono diversi ma l'effetto è lo stesso – progrAmmar

risposta

17

Essi non sono gli stessi, nel primo esempio, si sta colpisce un evento per l'oggetto dom onresize gestore.

La versione jQuery sta probabilmente facendo qualcosa di diverso dietro la scena. Senza guardare nel codice sorgente, probabilmente è semplicemente facendo:

window.addEventListener('resize', function() {...}) 

Detto questo, la versione jQuery e il nativo addEventListener sono ancora diversi perché jQuery è anche l'aggiunta qualche magia al gestore di eventi.

E addEventListenener è probabilmente il modo preferito per aggiungere eventi a un oggetto DOM, poiché è possibile aggiungere più eventi ma con l'attributo dom on[event] si è limitati a un evento.

Ecco un po 'più su di esso: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Mentre si è in esso, si potrebbe anche leggere su l'amico addEventListener: removeEventListener.

+1

Inoltre, il vantaggio di jQuery è una garanzia di compatibilità cross-browser. Non è un grosso problema, se ti interessano solo i browser più recenti, ma davvero utili con quelli più vecchi. – Anton

+0

@Anton che potrebbe essere possibile ma non ho scritto molto nulla usando jQuery per un paio d'anni e non mi sono mai sentito meglio. Avere a che fare con un framework ben organizzato è 9000 volte più bello di lavorare su una dom incollata con jQuery e anche se 'addEventListener' è più lungo da scrivere, un framework ben fatto potrebbe impedire anche la creazione di qualsiasi tipo di listener di eventi in modo esplicito. Conoscere gli interni è buono per andare oltre. –

+0

Grazie a Loic e Anton per le tue risposte. Molto apprezzato. –

10

No, non sono uguali. Si può provare:

$(window).on('resize',function1); 
    $(window).on('resize',function2); 

e function1 e function2 rispondono entrambi quando ridimensionamento finestra.

Ma se si utilizza

window.onresize = function1; 
window.onresize = function2; 

Solo function2 rispondere.