Discussion :

[Kurogane]

Bonjour !

Je cherche à faire en sorte qu'il y ai le moins possible de Javascript dans ma page HTML.
C'est pourquoi j'ai attribué un événement à un select (qui sert pour une ComboBox) dans le fichier Javascript, et non dans le code HTML.

Sauf que après pas mal de petits tests, j'arrive à faire fonctionner mon code mais d'une manière que je ne comprend pas.

Voici mon fichier HTML :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<!-- La ComboBox -->
<select id="ComboBox">
 
<!-- Quelques éléments de test mis dans la liste déroulante -->
	<option>Tagada</option>
	<option>Tsoin Tsoin</option>
</select>
 
<!-- Pour relier à mon fichier Javascript -->
<script type="text/javascript" src="script.js"></script>

Ensuite, mon fichier Javascript :

Code :

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

1
2
3
4
5
6
7
//La fonction en elle-même
function Bidon(){
	alert('La fonction Bidon fonctionne !');
};
 
//Affectation de la focntion à l'évenement onChange du select de mon HTML
document.getElementById("ComboBox").onChange=Bidon();

Voilà, lorsque j'affecte la fonction à mon événement, ça ne fonctionne pas.
Pour cela, il faut que j'affecte la fonction ainsi :

Code :

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

document.getElementById("ComboBox").onChange=Bidon;

Sans les parenthèses !
Alors que partout ailleurs, même sur un topic de ce même forum, (Developpez.net), les affectations sont mise avec les parenthèses...

Du coup, jeune padawan que je suis, je m'y perd un peu.

Une raison pour ne pas mettre les parenthèses ? Ou justement, ai-je fait une erreur ailleurs ?

Merci d'avance de votre aide, et bon courage !

P.S: Je pense que le titre n'est pas assez explicite... Mais j'arrive pas à le modifier. (un truc comme "[Débutant]Affectation fonction sur événement, avec ou sans parenthèse" aurai été mieux)

[Matthieu2000]

avec parenthèses tu affecte une valeur à une propriété!

[Kaamo]

Attention à la casse ! Il n'y a pas de majuscule à onChange !

Dans la discussion que tu mentionnes, il n'y a pas de parenthèse pour la solution. Les parenthèses servent à exécuter la fonction, il ne faut donc pas les mettre.

Si tu les mets, cela se traduit en :
"Lors du déclenchement de l'événement onchange sur mon select, je veux exécuter le résultat retourné par la fonction"

Or, toi tu veux :
"Lors du déclenchement de l'événement onchange sur mon select, je veux exécuter la fonction"

Attention à ne pas confondre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 // ici tu affectes une fonction anonyme (sans nom) lors de l'événement onchange.
document.getElementById("mon_select").onchange = function() {
  alert('ok'); 
};
 
// Equivaut à cela. 
// Déclaration d'une fonction nommée 'test'
function test() {
  alert('ok'); 
}
// Que tu affectes lors de l'événement onchange
document.getElementById("mon_select").onchange = test;

Faire ceci document.getElementById("mon_select").onchange = test(); aura pour conséquence d'exécuter directement la fonction test (à cause des () ) et d'affecter le résultat retourné à l'événement onchange. En l'occurrence, cela va afficher "ok" au moment de l'affectation (donc une seule fois) et exécuter undefined (autrement dit, rien faire) à chaque fois que onchange sera déclenché

[Kurogane]

Ho !
Merci beaucoup ! (rapide et simple)

En effet je ne connaissait pas cette nuance, entre affectation de la fonction, et l'affectation de la valeur que la fonction retourne ! (son exécution)

Merci beaucoup d'avoir pris le temps de m'expliquer !

Par ailleurs, la casse des IDE mettent des majuscules et ça fonctionne un peu partout (IE, FF, Chrome).

Y a-t-il des problèmes que pourrais causer ce non-respect de la casse ? (Savoir si je change d'IDE ou pas !)

Je chipote, mais merci en tout cas pour votre aide !

[Kaamo]

La confusion vient du fait que lors tu définis l'événement dans le html <select name="toto" onchange="mafonction()">, il faut mettre les parenthèses.
Il faut le voir ainsi : "Lors du déclenchement de onchange, exécute la fonction mafonction !" (et non le résultat cette fois)

Aussi, lorsque tu définis dans le HTML, tu peux ou non mettre la majuscule à onChange en fonction du Doctype utilisé. Tu auras "simplement" un problème de syntaxe mais la fonction sera bel et bien exécutée lors de l'événement.
Par contre, Javascript étant sensible à la casse, il ne faut pas mettre de majuscule.

Faire ceci

Code :

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

1
2
3
document.getElementById('un_id_dans_ma_page').onChange = function() {
  alert('Je suis une méthode');
}

ne lèvera aucune erreur. Cela va ajouter une méthode à cet élément du document. Si tu l'exécutes document.getElementById('un_id_dans_ma_page').onChange() cela va fonctionner, mais simplement si tu l'exécutes ainsi, explicitement. Le fait de déclencher l'événement change (en sélectionnant une autre valeur de ton select) ne l'exécuteras pas.

EDIT : Pour éviter les erreurs, je te conseille d'utiliser gestionnaire d'événement (minimaliste) compatible multi navigateur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var bindEvent = function( element, type, eventHandler ) {
  if ( element.addEventListener ) {
    element.addEventListener( type, eventHandler, false );
  } else if ( elemement.attachEvent ) {
    element.attachEvent( "on" + type, eventHandler );    
  }
};
 
// Exemple d'utilisation pour créer un événement sur un élément de la page :
// L'élément, le type événement, la portion de code à exécuter
bindEvent(document.getElementById('mon_select'), 'change', function () {
  alert('je change !');
});

[Bovino]

En même temps, c'est pas comme si personne n'avait prit sur son temps pour fournir les explications...
Les fonctions de rappel (callback).

[Kaamo]

Haaaa je n'avais pas retrouvé la discussion

[Bovino]

La confusion vient du fait que lors tu définis l'événement dans le html <select name="toto" onchange="mafonction()">, il faut mettre les parenthèses.
Il faut le voir ainsi : "Lors du déclenchement de onchange, exécute la fonction mafonction !" (et non le résultat cette fois)

C'est pas tout à fait ça.
En fait, l'attribut onchange va générer une fonction anonyme dont le code sera le contenu de l'attribut.
Ainsi, en interne, la synatxe

Code :

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

onchange="maFonction()"

va se transformer en

Code :

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

1
2
3
Element.onchange = function(){
    maFonction();
};

et donc c'est bien une référence à une fonction (en fait, la définition de la fonction elle-même) qui sera affectée à la propriété onchange.
C'est d'ailleurs pour cette raison que si l'on veut inhiber le comportement par défaut (typiquement, empêcher de suivre la cible d'un lien sur un attribut onclick), il ne faut pas faire de return false dans la fonction appelée (parce que la valeur serait ainsi retournée à la fonction anonyme qui n'en ferait rien) mais bien dans la valeur de l'attribut (ainsi, c'est bien la fonction anonyme qui renvoie false et qui inhibe la comportement par défaut).

[Kaamo]

En effet, j'étais allé vite en besogne. Merci de la précision

[Kurogane]

Messieurs, un énorme merci !

J'ai eu un cours, et plein d'explications sur des sujets touchant à ma question ! ( de quoi partir me cultiver quelques heures de plus !)

Vous avez fait un heureux moins bête !

Sujet largement résolu !

Bonne continuation à tous !