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

Version imprimable

04/02/2008, 09h54
Cladjidane

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

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
04/02/2008, 10h06
franculo_caoulene

Salut,

Non, pas à ma connaissance. A l'insertion du bouton dans le DOM il faudrait lui attacher l'évènement.
04/02/2008, 10h12
Cladjidane

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).
04/02/2008, 10h20
le_chomeur
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:

1 2 <script ...> ...</script>
Bon courage ^^

1 pièce(s) jointe(s)

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:

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>

04/02/2008, 11h26
le_chomeur

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 :)
04/02/2008, 13h43
Cladjidane

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 ;)
04/02/2008, 14h12
franculo_caoulene

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.

Voila l'exemple dont je te parlais :
- je met le listener non pas sur le li mais je vérifis si le li a le parent que j'ai définis :oops:

Code:

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
48
49
50
51
52
53
54
55
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
 
 //Fonction permettant d'initialiser les listeners
 function init_evenement(){
	 //On commence par affecter une fonction à chaque évènement de la souris
	 if(window.attachEvent){
	 document.onmousedown = start;
	 }
	 else{
	 document.addEventListener("mousedown",start, false);
	 }
 
 }
 
 //Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe
 function start(e){
	 //On initialise l'évènement s'il n'a aps été créé ( sous ie )
	 if(!e){
	 e = window.event;
	 }
	 //Détection de l'élément sur lequel on a clické
	 monElement = (e.target)? e.target:e.srcElement;
 
	 if(monElement.parentNode.id == "toto")
	 {
	 	alert(monElement.innerHTML);
	 return false;
	 }
 }
function ajouterNoeud(){
		var d = document;
		var NewLi =	d.createElement('li');
		//( un peu barbare mais bon  ;) )
		NewLi.innerHTML = "nouveau";
		d.getElementById('toto').appendChild(NewLi);
}
 window.onload = init_evenement; 
</script>
</head>
 
<body>
	<a href="#" onclick="ajouterNoeud()">ajouter un nouveau</a>
<ul id="toto">
	<li>ok</li>
	<li>test</li>
	<li>dernier</li>
</ul>
</body>
</html>

Bon courage

04/02/2008, 14h58
Cladjidane

merci pour cette approche, je vais étudier ça de pres.

Je ferais un petit retour d'info demain :)