[DOM] Surveiller une modification du DOM (lib prototype)

**Cladjidane** · 04/02/2008, 09h54

Bonjour, je me base sur prototype pour simplifer mon code

Je m'interoge sur la manière de gérer un evenement sur un bt (id='monBt' par exemple) une fois celui créé et inseré dans le DOM via une action quelconque.

Modèle :

1 - Au chargement de la page mon bt n'existe pas

2 - Un fois la page chargée je pose un gestionnaire d'evenement en javascript qui va surveiller si mon bt existe, si il existe on fait quelque chose au click par exemple.

3 - J'insere le bt dans le DOM via une action quelconque.

Problème :

Evidement mon gestionnaire ne reconnait pas le bt puisque au chargement de la page celui n'existait pas dans le DOM.

Aussi ma question, existe t-il une manière abstraite genre si DOM = modifié, on rappel le gestionnaire d'evenements?

Merci de vos avis

**franculo_caoulene** · 04/02/2008, 10h06

Salut,

Non, pas à ma connaissance. A l'insertion du bouton dans le DOM il faudrait lui attacher l'évènement.

**Cladjidane** · 04/02/2008, 10h12

Merci,

c'est ce que je fais mais une manière plus abstraite serait top.

Cela alleger nettement les manips

Edit : je pense notement a des outils comme firebug qui rafraichis la presentation html en live lors de la suppression d'un element(je ne parle pas de la suppresssion mais de ça representation dans la fenetre firebug).

**le_chomeur** · 04/02/2008, 10h20

Salut

as tu essayer de mettre ton bout de script vérifiant ton bouton ( ou l'appel de la méthode vérifiant les actions dessus, tout en bas de ta page ?

Code :

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

1
2
 
<script ...> ...</script>

Bon courage ^^

**Cladjidane** · 04/02/2008, 10h50

Justement, c ce que je cherche à eviter.

Je vais prendre un exemple concret pour etre clair, c'est un exemple simple, car le rafraichissement du DOM ce ferait plus en AJAX et je voudrais savoir si on peux éviter de devaoir rajouter un gestionnaire d'evenement à chaque fois

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
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Example</title>
 
<script type="text/javascript" src="prototype.js"></script>	 
<script type="text/javascript">
 
	Event.observe(window, 'load', gestionClick);
 
	function gestionClick() {
		// On ajoute au click un li dans le menu
		Event.observe('ajout', 'click', function(e) {
			$('menu').insert('<li>Ajouter</li>');
		});
 
		// On liste les li et on y appose une action au click
		$A(document.getElementsByTagName('li')).each(function (el) {
			Event.observe(el, 'click', function(e) {
				alert(el.innerHTML);
			});
		});
	}	
 
	/* Et si il était possible de faire ça (exemple) : 
 
	Event.observe(window, 'DOM-CHANGED', gestionClick);
 
	*/
 
</script>	
 
</head>
 
<body>
 
<a href="#" id="ajout">Ajouter bouton "Ajouter"</a>
 
<ul id="menu">
	<li>Voir</li>
  <li>Modifier</li>
  <li>Supprimer</li>
</ul>
 
</body>
</html>

**le_chomeur** · 04/02/2008, 11h26

Ok je viens de comprendre le principe ...
tu cherches à raffraichir les objet surveiller par le listener ...
ne connaissant pas prototype , peux tu essayer d'ajouter la méthode click sur ton nouveau li ? ( je sais ce n'est pas ce que tu cherches

)
sinon solution beaucoup plus propre :

- plutot que de mettre le listener sur les li, met le sur le ul puis vérifis si l'élément sur lequel l'utilisateur a cliqué est un li

Ne connaissant pas cette librairie je ne peux te donner que l'algo ou un bout de code plus complet mais perso ...

Bon courage

**Cladjidane** · 04/02/2008, 13h43

Merci pour la réponse mais le problème reste entier. Car à partir du moment ou l'élément(le li ajouter en l'occurence) n'est pas construit au load de la page, il ne sera jamais reconnu par le gestionnaire d'évenements qui lui est créé une fois la page completement chargé ( logique).

Donc à l'instar d'un load(ou onLoad pour les anciens :p) peut etre existe t'il un onChanged ou une manière de faire similaire.

Merci pour la réponse en tout cas

**franculo_caoulene** · 04/02/2008, 14h12

J'ai trouvé quelque chose, mais ce n'est pas forcément plaisant. Il existe bien les types d'évènement de mutation mais apparemment ce n'est pas supporté par IE. Et je n'ai pas trouvé ce genre de chose dans la doc de prototype.

[DOM] Surveiller une modification du DOM (lib prototype)

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager