attachEvent vs « .onmachin = truc; »

Version imprimable

12/09/2007, 16h36
Hibou57

attachEvent vs « .onmachin = truc; »
Bonjour,

J'ai eu une mauvaise surprise en voulant remédier à un de ces cas ou IE ne comprend pas « .onload = machin; », en le remplacant par « attachEvent ('onload', machin); ». Par exces de zèl, j'ai voulu remplacer tout les « .ontruc = machin; » par des attachEvent. Et c'est suite à cela que j'ai remarqué que l'objet qui reçois l'événement n'est pas le même selon que l'on attache l'événement d'une manière ou d'une autre.

Par exemple
Code:

1 2 3 4 5 6 <A .... id="monBouton"> <SPAN> <IMG ...> </SPAN> </A>
Si j'attache un gestionnaire onClick à monBouton avec « onclick = ... », alors c'est l'élément A qui reçois l'événement (le paramètre implicite this correspond à l'élément A), tandis qu'avec attachEvent, alors c'est l'élément IMG qui reçois l'événement.

IE s'emèle les pinceaux avec le bubble ?
12/09/2007, 16h50
SpaceFrog

Tu as un exemple avec un benchmark des retours d'alert(this.id) en fonction de la procédure d'attachement du onclick par .onclick=fucntion(){} ou attach event ... ?
ça me parait curieux que par attachement le bubble diffère ...

Voilà, c'est fait (voir les explications plus loin)

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
56
57
58
59
60
61
62
63
64
65
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="fr">
   <!-- Do not care about the following head and styles, this is
     -- just there to get a nice and usable sample.
     -->
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Test</title>
      <style type="text/css">
         a, span, img { display:block; }
         a { margin-bottom:1.5em; text-align:center; width:50px; }
         span { font-size:75%; }
         img { width:50px; }
      </style>
   </head>
   <body>
      <p>
         Cliquez sur le bouton 1 et 2 pour comparer le paramètre
         indiquant l'objet recevant l'événement.
      </p>
      <!-- Start of button -->
      <a href="#" id="button1">
         <span>
            <img src="no-picture1.gif">
         </span>
         <span>Bouton 1</span>
      </a>
      <!-- End of button -->
 
      <!-- Start of button -->
      <a href="#" id="button2">
         <span>
            <img src="no-picture2.gif">
         </span>
         <span>Bouton 2</span>
      </a>
      <!-- End of button -->
 
   </body>
   <script language="JavaScript">
      // Handler of button 1 : via assignment of a property
      var button1;
      button1 = document.getElementById("button1");
      button1.onmousedown = onButtonDown1;
      function onButtonDown1 ()
      {
         var element = event.srcElement;
         alert('Bouton 1 this: ' + this.tagName);
         alert('Bouton 1 element: ' + element.tagName);
      }
 
      // Handler of button 2 : via attachEvent
      var button2;
      button2 = document.getElementById("button2");
      button2.attachEvent('onmousedown', onButtonDown2);
      function onButtonDown2 ()
      {
         var element = event.srcElement;
         alert('Bouton 2 this: ' + this.tagName);
         alert('Bouton 2 element: ' + element.tagName);
      }
   </script>
</html>

Copiez ce code dans un fichier (en UTF-8) et testez.

La source de l'erreur a son explication dans this vs event.srcElement. This n'est pas renseigné correctement lorsque le gestionnaire est attaché par attachEvent, alors qu'il est renseigné lorsque le gestionnaire est attacher comme à une assignation de propriétée.

Est-ce normal ou pas ?

J'ai toujours travailler avec des assignations de propriétés jusque maintenant, et j'ai donc toujours travaillé avec this. J'ai un doute tout de même. Car étant donné qu'il y a bubble, c'est bien l'élément A qui doit recevoir l'événement... que event.srcElement renvoi l'élément IMG, je le conçois, mais this doit dans les deux cas êtres l'élément A, et malheureusement, si on attache l'événement avec attachEvent, this n'est pas correctement défini.

12/09/2007, 20h16
Hibou57

Ok, je viens de comprendre. Si on se réfère aux équivalences W3C des spécificités de IE, on constate que event.srcElement (pour IE) correspond à event.target (du W3C), et que event.currentTarget (du W3C) n'a aucun équivalent sous IE. Donc problème..... comment avoir l'équivalent de event.currentTarget ? C'est this quand on attache l'événement avec une propriété : mais comment l'obtenir quand on attache l'événement avec attachEvent ?
13/09/2007, 00h47
Hibou57

Malheureusement.... :(

Je ne pouvais pas mieux cauchemarder :piou: (c'est comme ça que je peux le dire ? .. j'avais pensé dire « je ne pouvais pas rêver pire », mais ça me semblait antinomyque)

Mais j'insiste quand-même :yaisse2: Quelqu'un(e) connais quand-même une solution ? Même si c'est impossible ?
13/09/2007, 10h26
Shinuza

Tu peux tout faire de manière custom, ce qui te permet d'éviter les memory leak par la même occasion...
13/09/2007, 11h59
Hibou57

Citation:

Envoyé par Shinuza

Tu peux tout faire de manière custom, ce qui te permet d'éviter les memory leak par la même occasion...

Custom ? Tu veux dire customisé avec des stickers de Cat'sEyes et AlienBazarre ? Ca me plait bien ça :D Non, je sais : sérieusement, tu peux me mettre sur une piste ? Si évite les gaspillage de mémoire, alors ça m'interesse beaucoup.

Par contre je crois que je retiens quand-même ça : mieux vaut autant que possible utiliser l'ancien style de gestionnaire d'événement, même s'il n'a pas la souplesse du nouveau. Par contre, il y a toujour ce cas où il est obligatoire, avec l'événement onload, qui ne semble pas être toujours compris par IE si il est attaché par assignation de la propriété.

La bonne vieille méthode est bien plus fiable...

Je vais voir plus tard sur google pour « event memory leak custom ».

Merci :)