Utilisation de la méthode AddEventListener()

**Rony Rauzduel** · 24/08/2010, 09h00

Bonjour à toutes et à tous,

Dans le code html suivant :

Code :

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

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 :

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

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.

**vermine** · 24/08/2010, 09h14

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 ?

**Rony Rauzduel** · 24/08/2010, 09h29

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.

**vermine** · 24/08/2010, 10h09

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 html :

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

<body onload="init();">

**Rony Rauzduel** · 24/08/2010, 10h14

Quitte à me répéter, j'aurai souhaité que le Javascript soit unobstrusive donc pas de Javascript dans le HTML ...

pas de ça

Code :

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

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

**vermine** · 24/08/2010, 10h20

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 html :

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

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

**Rony Rauzduel** · 24/08/2010, 10h25

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?

**vermine** · 24/08/2010, 10h32

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.

**BaBeuH** · 24/08/2010, 12h01

Bonjour,

Si tu ne souhaites pas utiliser :

Code :

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

<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 :

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

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 :

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

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

A+

**RomainVALERI** · 24/08/2010, 12h04

@transact : espece de maniaque de la propreté

(on dirait moi

)

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 javascript :

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

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* ^^

**Rony Rauzduel** · 25/08/2010, 11h55

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

Code :

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

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 :

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

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.

**Eric2a** · 25/08/2010, 12h38

Salut,

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

Code :

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

window.attachEvent('onsubmit', verification_mail);

Ca devrait le faire.

**Rony Rauzduel** · 25/08/2010, 13h42

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.

**Rony Rauzduel** · 25/08/2010, 17h00

[Résolu]

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

Code :

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

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.");
	}
}

Utilisation de la méthode AddEventListener()

JavaScript

Discussions similaires

Partager

Partager