Utilisation de la méthode AddEventListener()

Version imprimable

Bonjour à toutes et à tous,

Dans le code html suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> <title>Prototype - Interface connexion des agents</title> <script src="scripts/verif.js" type="text/javascript"></script> </head> <body bgcolor="white"> <form id="demoForm"> <input id="button" value="Button" type="button"> </form> </body> </html>
si je place le code javascript suivant :
Code:

1 2 3 4 5 6 7 8 if (document.body.addEventListener) { document.getElementById("demoForm").addEventListener("click", function(){alert("button clicked");}, false); } else if (document.body.attachEvent) { alert("Your browser does not support addEventListener"); }
Le script fonctionnne et la fenêtre s'affiche avec le message souhaité; par contre si je place le code dans le fichier verif.js
pour respecter l'aspect unobstrusive de Javascript et dissocier le
script et le balisage HTML cela ne fonctionne pas.

En fait rien ne se passe comme si mon gestionnaire d'évènement
n'était pas pris en compte.

J'utilise Firefox 3.5.11 sous Linux.

Merci d'avance.
Transact.

24/08/2010, 09h14
vermine

Bonjour,

Quand vous dites que vous mettez le script dans la page, vous le mettez à quel endroit ? Après le HTML ou avant ? Car dans votre seconde version, le fichier verif.js est appelé avant que le code HTML ne soit créé. Or ce javascript utilise le code HTML.
Ou bien... vous avez laissé les balises <script> dans le .js ?
24/08/2010, 09h29
Rony Rauzduel

Je place le script juste après la balise </form>.
C'est une erreur de ma part, j'ai laissé les balises scripts dans
le fichier verif.js, mais même sans cela ne marche pas.
24/08/2010, 10h09
vermine

Oui, c'est bien ce que je dis, vous appelez le script avant que le HTML ne soit créé. Donc le script ne retrouve pas ce qu'il cherche. ;)

Placez le code js dans une fonction nommée par exemple init().
Ensuite, appelez cette fonction dans le onload du body:

Code:

<body onload="init();">
24/08/2010, 10h14
Rony Rauzduel
Quitte à me répéter, j'aurai souhaité que le Javascript soit unobstrusive donc pas de Javascript dans le HTML ...

pas de ça
Code:

1 2 <body onload="init();">

Quitte à me répéter, si vous ne faites pas comme ça, vous ne serez pas certain que le code HTML soit complètement généré lorsque vous appelerez le script. :)

Cette version-ci vous sied-t-elle mieux ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <title>Prototype - Interface connexion des agents</title> <script src="scripts/verif.js" type="text/javascript"></script> </head> <body bgcolor="white"> <form id="demoForm"> <input id="button" value="Button" type="button"> </form> </body> </html> <script type="text/javascript"> init(); </script>
Ca ne change quasi rien à votre script d'origine. Mais bon, le script est en dehors du HTML...

24/08/2010, 10h25
Rony Rauzduel

Ceci me sied mieux, mais ce que j'ai du mal à comprendre et sûrement me l'expliquerai-vous, est ceci :

Toute la littérature actuelle sur le DOM 2 nous dit qu'il ne faut pas
que le Javascript soit dans le HTML réservé au contenu mais comment
faire pour que ce dernier ne le soit pas?
24/08/2010, 10h32
vermine

Il faut entendre que le contenu du HTML est son <body>. Et donc générallement on utilise le <head> et le <body onload="..."> pour définir son Javascript de manière sûre.

Edit: faire attention également au fait que Javascript n'est pas activé par tous les utilisateurs et que, si possible, le site puisse fonctionner sans Javascript. De manière moins jolie et agréable pour l'utilisateur, certes, mais fonctionner quand même.

Bonjour,

Si tu ne souhaites pas utiliser :

Code:

<body onload="init();">

qui, au passage, est une bonne pratique de bien séparer le js / html, tout comme on sépare css/html...

Bref, tu peux de la même façon utiliser le addEventListener sur le "load" de l'objet window de la même façon que tu l'utilises sur le click de ton element #demoform.

J'utilise en général les fonctions suivantes pour gérer les évènements :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function addEvent(obj,event,fct) { if (obj.attachEvent) obj.attachEvent('on' + event,fct); else obj.addEventListener(event,fct,true); } function removeEvent(obj,event,fct) { if (obj.detachEvent) obj.detachEvent('on'+event,fct); else obj.removeEventListener(event,fct,true); }
Et donc, appliqué à ton document ça pourrait donner qq chose comme ça :
Code:

1 2 3 4 5 6 addEvent(window,"load",function(){ var demoform = document.getElementById("demoform"); addEvent(demoform,"click",function(){ alert("click"); }); });
A+

@transact : espece de maniaque de la propreté :mrgreen: (on dirait moi :aie:)

Allez va, je te comprends bien...

On est bien d'accord : AUCUN extrait de JS dans ton HTML.
En revanche, dans ton fichier verif.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 if (window.addEventListener) { window.addEventListener('load', INITIALISATION, false); } else if (window.attachEvent) { window.attachEvent('onload', INITIALISATION); } function INITIALISATION() { // place ici toutes les fonctions que tu veux, elles s'éxécuteront // quand la page sera chargée. C'est donc aussi ici que tu dois placer //tous les autres éventuels écouteurs d'événements (actions des boutons, etc.) }
Ca permet d'avoir un HTML 100% *js-free* ^^

Merci pour ce script, par contre dans le script, je souhaite que
la validité du mail soit vérifié donc j'ai ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
if (window.addEventListener) {  
     window.addEventListener('submit', verification_mail, false);
} 
else if (window.attachEvent) {  
  window.attachEvent('submit', verification_mail);  
}
 
function verification_mail(mail) {	
	var elt = document.getElementById('identForm').value;
	if (elt.indexOf("@aquitaine.fr") >=0) {
		return true;
	} else {
		alert('Mail invalide ...');
		document.forms.demoForm.reset();
		return false;
	}
}

dans mon fichier HTML ceci :

Code:

1
2
3
4
5
6
7
8
9
10
 
<form name="demoForm" action="envoyer.php">
		<p>
		<label for="edtIdent" accesskey="I"><b>Identifiant*</b></label>
			<input type="text" id="identForm" name="mail" tabindex="1"/>
		</p>
		<p class="submit">
			<input type="submit" value ="Envoyer" accesskey="E" tabindex="2"/>
		</p>
	</form>

Mais même si le mail est invalide, il me renvoi vers la page envoyer.php qui es là pour la validation.
Il semblerait qu'il faille capturer l'évènement pour recharger la page.

Merci d'avance.
Transact.

25/08/2010, 12h38
Eric2a

Salut,

Remplace la chaine 'submit' par 'onsubmit' dans la ligne

Code:

window.attachEvent('onsubmit', verification_mail);

Ca devrait le faire.
25/08/2010, 13h42
Rony Rauzduel

Cela ne résout pas mon problème même si la syntaxe exact est onsubmit pour un évènement devant être compris par IE.

En fait je voudrai que si l'adresse mail n'est pas valide que la propagation de l'évènement n'est pas lieu et que la page
agent.html soit rechargée.

[Résolu]

Voici le code permettant d'effectuer cette opération, il faut mettre
un Event.stop(event); en utilisant Prototype.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
if (window.addEventListener) {  
     window.addEventListener('submit', mailUnsigned, false);
} 
else if (window.attachEvent) {  
  window.attachEvent('onsubmit', mailUnsigned);  
}
 
function mailUnsigned(event) {
	var login = $F('login').strip();
	if (login.endsWith('@aquitaine.fr') == false ) {
		alert("// Identifiant de connexion incorrect.");
		Event.stop(event);
	} else {
		alert("// Identifiant validé pour cette session.");
	}
}