Exécution d'une fonction à chaque déclenchement d'un événement

Invité · 15/06/2011, 18h57

Bonjour.

Avec le code ci-dessous, lorsqu'on clique sur la div #div1, une boîte alert apparaît et 5 div sont générées sur la page.

La génération des div se fait par l'intermédiaire de la function funcTest().

Au premier clic sur #div1, tout fonctionne. Mais aux suivants, plus rien ne fonctionne pour moi. Testé sur 4 navigateurs (or IE).

Est-ce que ce code génère le même comportement chez vous ?
Comment faire en sorte de pouvoir exécuter funcTest() autant de fois que l'on clique sur #div1 ?

Merci.

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
		html, body, div {
			margin: 0;
			padding: 0;
		}
		#div1 {
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head> 
 
<body>
 
	<div id="div1">Click</div>
 
	<script type="text/javascript">
 
		var div1 = document.getElementById('div1');
 
		function funcTest() {
			for(var i=0; i<5; i++) {
				document.body.innerHTML += '<div>test</div>';
			}
		}
 
		div1.addEventListener('click', function(e) {
			alert('ok');
			funcTest();
		}, false);
 
	</script>
</body>

**Bovino** · 15/06/2011, 19h19

C'est effectivement un classique de innerHTML. Etant donné que tu remplace le contenu du body par une chaine, l'affichage se passe bien, mais tu perds les méthodes appliquées au DOM.
La solution est de passer par une fonction manipulant uniquement le DOM :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html> 
<html lang="fr"> 
 
<head> 
	<meta charset="utf-8" /> 
	<title>sans titre</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
		html, body, div {
			margin: 0;
			padding: 0;
		}
		#div1 {
			width: 100px;
			height: 100px;
			background: blue;
		}
	</style>
</head> 
 
<body>
 
	<div id="div1">Click</div>
 
	<script type="text/javascript">
 
		var div1 = document.getElementById('div1');
 
		function funcTest() {
			var newDiv;
			for(var i=0; i<5; i++) {
				newDiv = document.createElement('div');
				newDiv.appendChild(document.createTextNode('test'));
				document.body.appendChild(newDiv);
			}
		}
 
		div1.addEventListener('click', function(e) {
			alert('ok');
			funcTest();
		}, false);
 
	</script>
</body>

Invité · 15/06/2011, 21h18

Ah ok... Merci.

Et cette perte des méthodes avec body.innerHTML, elle se retrouve de la même manière quel que soit l'élément HTML dont on remplace le contenu, ou c'est spécifique à certains éléments ?

--

Et une question subsidiaire me taraude: en observant ton code, je remarque l'absence du mot-clé var lors de la définition des variables. Son utilisation n'est donc pas nécessaire ? N'est-elle que souhaitable ? Et pourquoi ?

---

**Bovino** · 15/06/2011, 21h25

A priori, c'est le cas pour tous les éléments, mais en sachant que cela n'affecte que ceux qui sont modifiés et uniquement sur certaines propriétés et / ou méthodes.
Par exemple, si tu modifies une div avec innerHTML, cela ne devrait pas avoir d'impact sur les éléments en dehors de cette div.

Exécution d'une fonction à chaque déclenchement d'un événement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager