Phénomène etrange avec la propriété "id" d'un objet

[Jerome01]

Bonjour,

Je rencontre un phénomène assez particulier et j'aurais aimé savoir si d'après vous il est logique, et pourquoi.

En simplifiant, je commence donc par obtenir plusieurs images contenues dans un block "div", j'effectue une boucle pour initialiser quelques propriétés et appliquer les événement "onmouseover" et "onmouseout a chacune de mes images".

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
 
function _Init() 
{
  var i,n;  
  var pics    =   document.getElementById('blockImages').getElementsByTagName('img');   
 
  n = pics.length;   
  for(i = 0; i<n; i++)
	{    
    with (pics[i])
    {
      id =  'pic' + i;
      style.display = 'none';                     
      onmouseover = function()
      {      
        // code lorsque la sourie arrive dessus            
      }
      onmouseout = function()
      {        
        // code lorsque la sourie repart       
      }               
    }               
  }
}

Lorsque qu'un événement se déclenche, j'appelle une autre fonction en passant l'id de l'objet en paramètre.
Ainsi pour récupéré l'objet en question par exemple, plutôt que d'utiliser la méthode "document.getElementById(objID)" a chaque fois, j'ai préféré préalablement faire ceci :

Code :

1
2
pics[pics[i].id] = pics[i];
delete pics[i]

J'obtiens donc cela :

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
 
function _Init() 
{
  var i,n;  
  var pics    =   document.getElementById('blockImages').getElementsByTagName('img');   
 
  n = pics.length;   
  for(i = 0; i<n; i++)
	{    
    with (pics[i])
    {
      id =  'pic' + i;
      style.display = 'none';                     
      onmouseover = function()
      {      
        // code lorsque la sourie arrive dessus
        mafonction(this.id)             
      }
      onmouseout = function()
      {        
        // code lorsque la sourie repart
        mafonction(this.id)       
      }               
    }
    pics[pics[i].id] = pics[i];
    delete pics[i];               
  }
  var mafonction = function(objID)
  {    
    var monObjet = pics[objID];            
  };
 
}

A ce moment la, j'obtiens une erreur avec IE6 par exemple, et je me rends compte que si j'enlève le petit morceau de code que j'avais préalablement rajouter

Code :

1
2
pics[pics[i].id] = pics[i]; 
delete pics[i];

Tout fonctionne parfaitement, dans le sens ou a partir du moment ou j'initialise l'id de l'objet, mon tableau "pics[objID]" renvois bien mon objet... pourquoi ?

Merci d'avance pour l'éclaircissement de ce sujet.

[RomainVALERI]

Il me semble que la ligne

Code :

pics[pics[i].id] = pics[i];

ne fait qu'une référence sur l'objet, donc le delete qui suit supprime l'objet, rendant "orpheline" la référence restante (pics[pics[i].id])...

La question cruciale me semble donc :
Quel est ici l'intérêt du delete ?

edit : je viens de vérifier sur Firefox : ça ne se comporte pas du tout comme je viens de décrire Le delete ne supprime que la référence, pas l'objet référencé.
Bon, cela dit, c'est peut-être différent sur IE6 ^^ Tu as quelque chose pour debugger sur IE6 ? (genre debugbar)

[Jerome01]

Non je ne débug pas IE6, j'utilise lorsque c'est vraiment nécessaire javascript debuger sur firefox, sinon la plupart du temps, les boites de dialogues "alert".

Mais pour résumer mon premier post long et barbant, ce que j'essais de comprendre, c'est pourquoi ce bout de code me revoit mon objet :

Code :

1
2
pics[i].id = 'pic' + i;
alert(pics[pics[i].id]);

le tableau référençant mes objets devrait pourtant ne rien renvoyer aux clées "id" de chacun de mes objet, (pics[pics[i].id])
Mais le simple fait d'initialiser la propriété id de ces objet donne une nouvelle référence de celui-ci dans le tableau à la clée "id".

[RomainVALERI]

Envoyé par Jerome01

Non je ne débug pas IE6, j'utilise lorsque c'est vraiment nécessaire javascript debuger sur firefox, sinon la plupart du temps, les boites de dialogues "alert".

Je veux pas te forcer la main, hein J'ai pas d'actions chez eux ^^ mais au cas où tu veuilles souffrir moins...

>>> hop.

[Bovino]

Code :

pics[pics[i].id] = pics[i];

C'est complètement tordu ton truc, d'autant que le tableau pic existe déjà et est de type Array alors qu'en lui passant des chaines en indice, cela le transforme en Object...

plutôt que d'utiliser la méthode "document.getElementById(objID)"

J'avoue que j'ai du mal à voir l'intérêt de la chose

[bigboomshakala]

Envoyé par Bovino

J'avoue que j'ai du mal à voir l'intérêt de la chose

Faire le minimum de parcours de DOM possible. J'ai déjà eu des problèmes de perf à cause de ça. Si tu références une fois tes noeuds utiles, tu les récupères cash

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
<html>
 <head>
  <script>
   window.onload = function(){
    var pics = {};
    var imgs = document.getElementsByTagName("IMG");
 
    var i, n;
    for (i=0, n=imgs.length; i<n; i++){
     var img = imgs[i];
     img.id = "pic" + i;
     pics[img.id] = img;
    }
 
    var msg = "";
    for (prop in pics){
     msg += "id = " + pics[prop].id + "\n";
    }
 
    alert(msg);
   }
  </script>
 </head>
 <body>
  <img /><img />
  <img /><img />
  <img /><img />
 </body>
</html>

[sekaijin]

Envoyé par Jerome01

Bonjour,

....
Lorsque qu'un événement se déclenche, j'appelle une autre fonction en passant l'id de l'objet en paramètre.
Ainsi pour récupéré l'objet en question par exemple, plutôt que d'utiliser la méthode "document.getElementById(objID)" a chaque fois, j'ai préféré préalablement faire ceci :

Code :

Why ????

Envoyé par Jerome01

J'obtiens donc cela :

Code :

A ce moment la, j'obtiens une erreur avec IE6 par exemple, et je me rends compte que si j'enlève le petit morceau de code que j'avais préalablement rajouter

Code :

Tout fonctionne parfaitement, dans le sens ou a partir du moment ou j'initialise l'id de l'objet, mon tableau "pics[objID]" renvois bien mon objet... pourquoi ?

Merci d'avance pour l'éclaircissement de ce sujet.

Pourquoi utiliser des id alors que tu as les objets

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
function _Init()
{
  var i,n;
  var pics = document.getElementById('blockImages').getElementsByTagName('img');
 
  n = pics.length;
  for(i = 0; i<n; i++)
  {
    with (pics[i])
    {
      id =  'pic' + i;
      style.display = 'none';
      onmouseover = function()
      {
        // code lorsque la sourie arrive dessus
        mafonction(this)
      }
      onmouseout = function()
      {
        // code lorsque la sourie repart
        mafonction(this)
      }
    }
  }
  // on n'a plus besoin de pics
  delete pics;
  var mafonction = function(obj)
  {
    var monObjet = obj;
  };
}

mais tu peux encore faire plus simple

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
function _Init()
{
  var i,n;
  var pics = document.getElementById('blockImages').getElementsByTagName('img');
  var mafonction = function()
  {
    var monObjet = this;
  };
 
  n = pics.length;
  for(i = 0; i<n; i++)
  {
    with (pics[i])
    {
      id =  'pic' + i;
      style.display = 'none';
      // code lorsque la sourie arrive dessus
      onmouseover = mafonction;
      // code lorsque la sourie repart
      onmouseout = mafonction;
    }
  }
  // on n'a plus besoin de pics
  delete pics;
}

A+JYT

[bigboomshakala]

re,

le delete pics n'est pas nécessaire dans l'exemple d'une fonction, la portée de la variable se limite à la fonction.

sinon pour info, le "with", bien que pratique pour la syntaxe, n'est pas très performant (bon. si son utilisation est occasionnel, c'est négligeable)