Incompréhension sur les événements

Bonjour, besoin d'une petite explication svp.

Pourquoi si je fais

Code:

---

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:

---

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.?

Bonjour,
à partir de cette fonction

Code:

---

1 2 3

function show (){ alert( 'toto'); }

---

ne pas confondre

Code:

---

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:

---

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.

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.

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:

---

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

---

Merci ça fonctionne.

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

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

Code:

---

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:

---

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?

Citation:

---

Oui oui,...

---

c'est le principal.

Citation:

---

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:

---

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:

---

1 2 3 4

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

---

Merci