Utilisation de la méthode AddEventListener()

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

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, 10h14

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, 10h29

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, 11h09

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, 11h14

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, 11h20

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

Utilisation de la méthode AddEventListener()

JavaScript

Vue hybride

Discussions similaires

Partager

Partager