Discussion :

[batanga09]

Bonjour, besoin d'une petite explication svp.

Pourquoi si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
element.addEventListener('focus',function(){
console.log('toto');
});

la fonction s’exécute bel et bien lorsque cette élément a le focus mais si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function toto(){
	console.log('toto');	
}
element.addEventListener('focus',toto());

La fonction s’exécute dès le chargement de la page.?

[NoSmoking]

Bonjour,
à partir de cette fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function show (){
  alert( 'toto');
}

ne pas confondre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var fct = show;  // sans parenthèse

la variable fct pointe sur le fonction show, un appel à fct() ouvrira une boîte d'alerte avec 'toto' affiché.

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var fct = show();  // avec parenthèses

où le résultat de la fonction show est affecté à la variable fct, qui vaut dans ce cas undefined, et ce après exécution de la fonction soit ici l'affichage de l'alerte.

Tu es dans le 2^éme cas.

[batanga09]

Merci pour ton intervention,

Mon problème dans le deuxième cas c'est plutôt le fait que la fonction soit exécutée ( affichage de la boîte de dialogue) alors que l'élément 'element' n'a pas le "focus". chez moi la fonction est exécutée dès chargement de la page et pourtant moi je souhaite l'exécuté quand 'element' a le focus.

[NoSmoking]

c'est ce que je t'ai indiqué te ne passes pas la référence à la fonction mais le résultat après que la fonction se soit exécutée.

Mettre les parenthèses après une fonction c'est demander son « exécution ».

essaies

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

element.addEventListener('focus', toto, false); // ici on a mit la référence à la fonction , son adresse en quelque sorte

[batanga09]

Merci ça fonctionne.

[NoSmoking]

Que cela fonctionne est une chose mais as tu compris ton erreur ?

[batanga09]

Oui oui, enfin je pense; en gros si je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function toto(){
		console.log('toto');	
	}
	element.addEventListener('focus',toto());

je passe en paramètre le résultat de l'exécution de la fonction, d'où l'affichage dans ma console au moment de l'exécution
tandis que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
function toto(){
		console.log('toto');	
	}
	element.addEventListener('focus',toto);

je passe en paramètre la référence vers ma fonction qui ne sera exécutée que lorsque mon élément aura le focus.

enfin passer une fonction anonyme en paramètre a le me comportement que le deuxième cas! exact?

[NoSmoking]

Oui oui,...

c'est le principal.

passer une fonction anonyme en paramètre a le me comportement que le deuxième cas! exact?

oui dans ton code précédent.

On peut obtenir le même comportement (que ton code #1) en demandant l'exécution immédiate d'une fonction anonyme, voir code #2

code #1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
// définition de la fonction
var fct = function(){
      alert('toto')
};
// s'éxécute si l'on écrit
fct();  // présence des parenthèses

code #2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// définition plus demande exécution immédiate
var fct = (function(){
      alert('toto')
})();  // présence des parenthèses

[batanga09]

Merci