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

**Théolude** · 30/07/2009, 10h21

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 :

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

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?

Merci, Théolude.

**franculo_caoulene** · 30/07/2009, 10h47

Salut,

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

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
<!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>

**Théolude** · 30/07/2009, 10h56

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

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

**franculo_caoulene** · 30/07/2009, 11h06

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!

**Théolude** · 30/07/2009, 11h11

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.

**franculo_caoulene** · 30/07/2009, 11h14

Oublie textContent, la façon de faire fonctionne.

**Bovino** · 30/07/2009, 11h16

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 :

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

1
2
var test = document.createTextNode('Toto');
alert(test.nodeValue);

**Théolude** · 30/07/2009, 11h18

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 :

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

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

**franculo_caoulene** · 30/07/2009, 11h24

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

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
<!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...

**Théolude** · 30/07/2009, 11h29

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

Théolude

**franculo_caoulene** · 30/07/2009, 12h03

De la même façon :

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
<!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>

**Théolude** · 30/07/2009, 12h06

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

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

JavaScript

Discussions similaires

Partager

Partager