Javascript addEventListener funzione

Question

Sono nuovo di gestori di eventi e mi sono imbattuto in un codice che è scritto sotto

document.addEventListener("DOMContentLoaded", function() { 
    initialiseMediaPlayer(); 
}, false); 

C'è qualche differenza per iscritto lo stesso codice

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false); 

In definitiva siamo chiamando la stessa funzione, quindi fa la differenza o c'è qualche vantaggio nello scriverlo nel modo sopra?

Answer 1

document.addEventListener("DOMContentLoaded", function() { 
    initialiseMediaPlayer(); 
}, false); 

Sarà eseguito initialiseMediaPlayer quando il contenuto viene caricato dom.

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false); 

è un errore di sintassi; se si rimuove il punto e virgola:

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false); 

chiamate initialiseMediaPlayer immediatamente, quindi passa il valore di ritorno (che probabilmente non è una funzione) per addEventListener. Questo non funzionerà come desiderato.

---

Si può fare

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false); 

(rimuovere la parentesi = chiamata di funzione). Quindi initialiseMediaPlayer verrà eseguito su contenuto dom caricato e funzionerà come desiderato.

Tuttavia, a differenza del primo caso, initialiseMediaPlayer riceverà effettivamente gli argomenti forniti dal browser. Inoltre, il suo valore di ritorno viene ricevuto dal browser. In caso di DOMContentLoaded, molto probabilmente questo non importa molto.

Si evita inoltre di creare una funzione anonimo aggiuntiva se si passa direttamente a initialiseMediaPlayer. Di nuovo, l'effetto non è realmente percepibile dal punto di vista dell'utente.

Answer 2

Il secondo argomento sulla funzione addEventListener() accetta la funzione di tipo . Quindi non è possibile passare initialiseMediaPlayer(); perché si tratta di una chiamata di funzione.

Che cosa si può fare è:

var onDOMContentLoaded = function() { 
    initialiseMediaPlayer(); 
}; 
document.addEventListener("DOMContentLoaded", onDOMContentLoaded, false); 

Answer 3

1). Sì, c'è una grande differenza. La seconda versione genererà un errore. Ma anche se a risolvere il problema in questo modo:

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer(), false); 

initialiseMediaPlayer non saranno chiamati DOMContentLoaded perché () fanno eseguire immediatamente, mentre si deve passare un referece a una funzione, non il suo risultato.

2). Un'altra differenza significativa è il contesto di invocazione .

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer, false); 

initialiseMediaPlayer verrà richiamato nel contesto di document dell'oggetto. Mentre la prima versione verrà chiamata nel contesto dell'oggetto Window.

Answer 4

nel primo caso

document.addEventListener("DOMContentLoaded", function() { 
    initialiseMediaPlayer(); 
}, false); 

la funzione anonima function(){initialiseMediaPlayer();} è registrato per essere attivato quando l'evento del documento 'DOMContentLoaded' viene attivato

nel secondo caso:

document.addEventListener("DOMContentLoaded", initialiseMediaPlayer();, false); 

cosa è registrato poiché l'ascoltatore di eventi è il risultato dell'espressione initialiseMediaPlayer()

così, sì, c'è una differenza :)