web-dev-qa-db-fra.com

Fonction Javascript addEventListener

Je suis nouveau chez Event Handlers et j'ai trouvé un code écrit ci-dessous

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

Y at-il une différence dans l’écriture du même code que 

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

En fin de compte, nous appelons la même fonction. Cela fait-il une différence ou y a-t-il un avantage à l'écrire de la manière ci-dessus? 

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

S'exécutera initialiseMediaPlayer lorsque le contenu du dom est chargé.

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

est une erreur de syntaxe; si vous supprimez le point-virgule:

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

appelle initialiseMediaPlayer immédiatement, puis passe la valeur de retour (qui probablement n'est pas une fonction) à addEventListener. Cela ne se comportera pas comme souhaité.

Tu peux faire

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

(supprimez les parenthèses = appel de fonction). Ensuite, initialiseMediaPlayer sera exécuté sur le contenu de la mémoire chargé et agira comme souhaité.

Cependant, contrairement au cas précédent, initialiseMediaPlayer recevra réellement les arguments fournis par le navigateur. En outre, sa valeur de retour est reçue par le navigateur. Dans le cas de DOMContentLoaded, cela n'a probablement pas beaucoup d'importance.

Vous évitez également de créer une fonction anonyme supplémentaire si vous transmettez directement initialiseMediaPlayer. Encore une fois, l'effet n'est pas vraiment perceptible du point de vue de l'utilisateur.

46
John Dvorak

1). Oui, il y a une grande différence. La deuxième version jettera une erreur. Mais même si vous corrigez ça comme ça:

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

initialiseMediaPlayer ne sera pas appelé sur DOMContentLoaded car () le fera exécuter immédiatement, alors que vous devez passer une référence à une fonction, pas à son résultat.

2) Une autre différence significative est le contexte d'invocation.

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

initialiseMediaPlayer sera invoqué dans le contexte de l'objet document. Alors que la première version sera appelée dans le contexte d'objet Window.

10
dfsq

Le deuxième argument de la fonction addEventListener() accepte type function . Donc, vous ne pouvez pas transmettre initialiseMediaPlayer(); car il s'agit d'un appel de fonction.

Ce que vous pouvez faire c'est:

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

dans le premier cas

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

la fonction anonyme function(){initialiseMediaPlayer();} est enregistrée pour être déclenchée lorsque l'événement 'DOMContentLoaded' du document est déclenché

dans le second cas:

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

ce qui est enregistré comme écouteur d'événement est le résultat de l'expression initialiseMediaPlayer()

oui, il y a une différence :)

0
Francisco Meza