[POO][Gestionnaire d'événement déclaré comme méthode d'une classe]

Version imprimable

Bonjour,

Je suis en train de créer une classe JS que je veux générique et simple à utiliser. Dans sa conception j'ai donc intégré les gestionnaires d'événements sur les objets qu'elle crée à l'intérieur de la classe. Ce qui donne quelque chose du genre:
Code:

1 2 3 4 5 6 7 8 9 var maSuperClass = function(){ [......... suizz..........] this.divOnMouseDown = function(){ this.obj_input_field.value = this.getValue(this); this.obj_form.submit(); } this.obj_div.onmousedown = this.divOnMouseDown; }
Et bien sur ça ne marche pas car le gestionnaire d'événements JS onmousedown attend une fonction et non une méthode d'une classe. J'ai envisagé d'utiliser des méthodes statiques en les sortant de ma classe ; mais malheureusement dans les méthodes qui vont gérer les événements je fais références à des méthodes non statiques de ma classe (this.). Je veux éviter de transformer toute ma classe en collection de méthodes statiques...

Y'a t'il une solution pour gérer proprement ce problème? :aie:

Merci, Théolude.

portée du mot clé this

Salut,

C'est un problème de portée de this et non de méthode ou fonction :

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
<!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>
  <title>portée de this</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  div {width:10em;height:3em;background:#333;}
  </style>
</head>
<body>
  <script type="text/javascript">
  <!--
    var FC = function() {
      this.div = document.createElement("div");
      this.tn = document.createTextNode("on clique ici");
      this.div.appendChild(this.tn);
      document.body.appendChild(this.div);
      var me = this;
      this.a = function() {
        alert(this.tn +" - "+ me.tn.textContent);
      }
      this.div.onmousedown = this.a;
    }
    var fc1 = new FC();
  //-->
  </script>
</body>
</html>

30/07/2009, 10h56
Théolude

Citation:

Envoyé par franculo_caoulene

Salut,
C'est un problème de portée de this et non de méthode ou fonction [/CODE]

Merci de ta réponse ... et désolé de l'ineptie de ma remarque.
Mais que dans une méthode d'une classe, l'opérateur this ne puisse pas faire référence à une propriété ou une méthode de la classe .... je ne comprends pas :( :calim2: :aie:

J'ai essayé ton exemple, et effectivement dans ta méthode a, les références à this.tn ou me.tn.textContent sont null.

J'ai pris mes petits doigts, j'ai fait une recherche et je suis tombé sur ça : http://www.developpez.net/forums/d45...variable-this/ ... j'essaye et je vous tiens au courant.

Merci de ton aide, Théolude
30/07/2009, 11h06
franculo_caoulene

hop hop hop! ce que je propose est la bonne solution. C'est juste que textNode.textContent n'est pas pris en compte par IE8 (c'est nouveau?). me.tn fonctionnera partout.

edit : textContent n'a jamais fonctionné sous IE!
30/07/2009, 11h11
Théolude

Citation:

Envoyé par franculo_caoulene

hop hop hop! ce que je propose est la bonne solution. C'est juste que textNode.textContent n'est pas pris en compte par IE8 (c'est nouveau?). me.tn fonctionnera partout.

Je te confirme sous IE 8, je récupère undefined et undefined dans les deux cas. Ca ne va sacrément pas arranger mes affaires cette histoire ...

Théolude

NB: Toutes mes confuses, erreur de codage dans mon test, ton diagnostique était le bon textContent n'est apparemment pas supporté sous IE8.
30/07/2009, 11h14
franculo_caoulene

Oublie textContent, la façon de faire fonctionne.
30/07/2009, 11h16
Bovino
Salut,
Je confirme que la solution de franculo est la bonne ;)
En revanche, pour ton problème, il y a une raison de passer par une propriété "exotique" plutôt que par nodeValue ?
Code:

1 2 var test = document.createTextNode('Toto'); alert(test.nodeValue);
30/07/2009, 11h18
Théolude
Citation:
Envoyé par Bovino

Salut,
Je confirme que la solution de franculo est la bonne ;)
En revanche, pour ton problème, il y a une raison de passer par une propriété "exotique" plutôt que par nodeValue ?

Code:

1 2 var test = document.createTextNode('Toto'); alert(test.nodeValue);
C'est le test de Franculo qui utilisait TextContent :) Je ne l'utilise pas dans mon script.

Théolude

Voilà! merci Bovino, c'est nodeValue que j'utilise d'habitude!

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
<!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>
  <title>portée de variable</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  div {width:10em;height:3em;background:#333;}
  </style>
</head>
<body>
  <script type="text/javascript">
  <!--
    var FC = function() {
      this.div = document.createElement("div");
      this.tn = document.createTextNode("on clique ici");
      this.div.appendChild(this.tn);
      document.body.appendChild(this.div);
      var me = this;
      this.a = function() {
        alert(this.tn +" - "+ me.tn.nodeValue);
      }
      this.div.onmousedown = this.a;
    }
    var fc1 = new FC();
  //-->
  </script>
</body>
</html>

textContent fait partie du DOM Core 3, c'est exotique aujourd'hui, mais demain ce sera banal...

30/07/2009, 11h29
Théolude

Et pour en revenir au problème initial ...

Si j'utilise un setTimeout dans ma classe, et que je veux appeler une méthode de ma classe dans ce timeout... je fais comment :mrgreen:

Théolude

De la même façon :

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
<!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>
  <title>portée de variable</title>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;}
  body {margin:10px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
  div {width:10em;height:3em;background:#333;}
  </style>
</head>
<body>
  <script type="text/javascript">
  <!--
    var FC = function() {
      this.div = document.createElement("div");
      this.tn = document.createTextNode("on clique ici");
      this.div.appendChild(this.tn);
      document.body.appendChild(this.div);
      var me = this;
 
      this.st = setTimeout(function() {
        me.a();
      }, 500);
 
      this.a = function() {
        alert(this.tn +" - "+ me.tn.nodeValue);
      }
      this.div.onmousedown = this.a;
    }
    var fc1 = new FC();
  //-->
  </script>
</body>
</html>

30/07/2009, 12h06
Théolude

Oui effectivement c'est évident et je me sens tout débile d'avoir poser la question... à ma décharge je ne pensais pas qu'on pouvait définir "on the fly" la fonction appelée par setTimeout.

Merci beaucoup pour tes (vos) conseils... je fréquente régulièrement les forums de developpez, et il arrive plus souvent que je me réponde à mes propres questions, plutôt que quelqu'un vienne m'aider à résoudre mon problème !! :)

Théolude