Discussion :

[el_butcho]

Bonjour,

Comment fait-on pour passer un paramètre à une fonction si on utilise un gestionnaire d'évènement?

J'ai une page php qui me renvoit plusieurs enregistrement depuis une base de données. J'ai crée un lien sur chaque ligne de résultat qui me permet de voir en détail un enregistrement. J'aimerais utiliser Ajax pour faire cela.

Il est possible de faire cela ainsi:

Code :

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

echo ("<a href=# onclick=function(".$variable.");>ici</a>");

Cependant, j'ai lu à plusieurs endroits que cela n'était pas conseillé...

Je me demande donc comment réaliser la même chose avec une gestionnaire d'évènement (en utilisant prototype).

J'aurais donc quelque chose comme ca:

un lien:

Code :

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

<a id="hello"></a>

et le code javascript suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function bindElement()
{
    Event.observe('hello', 'click', functionAvecParamètre);
}
 
Event.observe(window,  'load',bindElement );
 
function functionAvecParamètre(???)
{
   //récupération des paramètre pour effectuer une requete ajax
}

Comment peut-on réaliser cela?

Merci d'avance

[le_chomeur]

juste par curiosité pourquoi :

Code :

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

echo ("<a href=# onclick=\"tafonction('".$variable."');\">ici</a>");

serait déconseillé ?

[el_butcho]

J'ai lu que cela était déconseillé car cela représente une intrusion du comportement dans le contenu...

En effet, cela ne pose aucun problème technique mais c'est semble-t-il une question de séparation stricte du contenu et des comportements. C'est donc plus un état d'esprit de développement "propre"...

[NikoGJ]

Il me semble qu'il y a une astuce avec les méthodes bind/bindAsEventListener
Un truc dans le genre:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
Event.observe(window, 'load', function(){
    Event.observe('hello', 'click', maFonction.bind(window, param1, param2));
 
});
 
function maFonction(param1, param2)
{
   // et hop!
}

(Par contre.... j'ai pas testé ^^')


Pour l'histoire de l'intrusion de comportement, j'utilise la même "manière de faire" que toi el_butcho, c'est dans le même état d'esprit que de séparer le design du contenu (css/html)

Par contre, l'utilisation onclick=, onmouseover= etc. peut représenter un problème technique dans le cas où plusieurs gestionnaires d'évènements sont affectés à un même élément.
évidement pour les liens, ça pose en général pas de problèmes mais quand on utilise plusieurs frameworks par exemple qui utilisent l'évènement onload de la page pour s'initialiser, le fait d'affecter directement (du style onload=[...]) écrase les anciens évènements qui sont liés. --> Donc modification du comportement existant, donc javascript obstusif (si j'ai bien compris la définition de l'obstrusion ^^')
C'est pour ça qu'on passe souvent par des méthodes qui rajoutent un gestionnaire (addEventObserver() sous FF, attachEvent() sous IE, scindées sous Prototype par Event.observe() \o/ Hurray!)