Discussion :

[CodeMikiman]

Bonjour,

Cela fait quelques temps que je cherche comment faire pour utiliser les évenements d'une page via un fichier Javascript sans avoir à entrer la structure d'évenement (onChange, onClick) depuis l'input du formulaire.

Je connais l'identifiant des champs dont je dois contrôler les évenements.

Voici la structure de mes pages :
index.html
script.js

Je dois pouvoir, depuis la page script.js, exécuter du code javascript lors d'un onClick par exemple.

Dans ma page index.html, j'aimerai que mon code reste sans les évenements.
Exemple :

Code :

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

<input type="text" name="nom" size="20" />

Connaissez-vous une solution à ma recherche ?
Merci d'avance
Cordialement,
Mikiman

[le_chomeur]

Salut, en version simplifié :

Code :

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

1
2
3
4
5
//Récupération de l'élément
var MonChamps = document.getElementById("TonChamps");
 
//Attachement de l'évènement
MonChamps.addEventListener("Evènement", Action, false);

Evènement = l'évènement sur lequel tu veux déclencher ton action ( onclick, onmouseover ... )

Action = La méthode que tu veux appeler

[CodeMikiman]

Merci beaucoup !

Je vais essayer ça de suite.
Encore merci, bonne journée

Cordialement,
Mikiman

[SpaceFrog]

oui plus pragmatiquement :

Code :

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

MonChamps.onclick=fonction(){ alert('coucou')});

[le_chomeur]

tiens a ce sujet spaffy , la différence entre la addEventListener et l'affectation par la méthode de l'objet ?? ( monobjet.onclick ) ??

[SpaceFrog]

addEventListener n'est pas a ma connaissance entièrement crossbrowser ...
en particulier me semble-t-il au niveau de la syntaxe de l'action ...
clikc onclick ... ???

[le_chomeur]

effectivement , IE et FF ne gère pas le addEventListener de la même façon , mais je m'interrogeais plus sur le coté performance ^^

[SpaceFrog]

performances ...

ben déja pour moi ne pas avoir à coder une ligne pour IE et une autre pour Gecko based, c'est déja plus performant ...

Ensuite tu peux toujours essayer de Benchmarker le truc avec une boucle sur 10000 evènements ...
Mais bon sur un seul évènement je ne pense pas que tu gagnes un pet de moustique ...
Et honêtement même si tu le fais je ne pense pas que l'utilisateur en soit incommodé !

Etant pragmatique je penche plus pour l'utilisation de code crossbrowser qui a fait ses preuves et est en plus plus clair ...

[le_chomeur]

ok ok merci pour ces précisions

[CodeMikiman]

J'ai donc essayé avec la deuxième solution proposée.
Voici mon code :

Code :

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

1
2
3
4
5
function fonction(){
	alert("test");	
}
 
nom.onclick = fonction();

L'erreur renvoyée est :

Erreur*: nom is not defined

J'ai essayé en ajout "document.onclick" mais l'erreur persiste.

Savez-vous d'où cela peut venir ?

Merci d'avance
Cordialement,
Mikiman

[SpaceFrog]

encore faut il savoir lire le code proposé ...

Code :

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

1
2
3
4
5
function fonction(){
	alert("test");	
}
 
nom.onclick = function(){fonction();}

ou encore

Code :

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

nom.onclick = fonction;

[CodeMikiman]

J'ai effectué la mise à jours du code, voici ma version actuelle :

Code :

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

1
2
3
4
5
function fonction(){
	alert("test");	
}
 
nom.onclick = function(){fonction();}

L'erreur renvoyée est toujours la même, il dit que "nom" n'est pas défini.

(Le code ci-dessus est placé dans un fichier "test.js" qui est appelé depuis la page "index.html" contenant le champ de texte "nom").

Merci beaucoup pour ton aide

[Bovino]

Peut-être que :

Code :

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

document.getElementById('nom').onclick = function(){fonction();}

serait mieux...

[SpaceFrog]

ben oui faut bien l'attribuer à un objet le onclick .. ça me paraissait tellement évident ...

[le_chomeur]

en un mot => Mdr ^^