Prototypage et écouteur d'évènement

Version imprimable

Bonsoirs à tous,

Je commence de suite par le vif du sujet, le script...:
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 <html> <head> <script> var maClass = function() { this.element = null ; this.elementWidth = null ; } maClass.prototype.config() { this.elementWidth = document.getElementById(this.element).offsetWidth ; document.getElementById(this.element).onclick = this.trying ; } maClass.prototype.trying() { alert(this.elementWidth) ; } </script> </head> <body> <span class="monSpan" id="monSpan">Push</span> <script> var monObjet = new maClass() ; monObjet.element = "monSpan" ; monObjet.config() ; </script> </body> </html>
Ma question est la suivante :

Avec un script tel que celui-ci, comment garder la valeur des attributs, d'une méthode à l'autre, lors d'évènement de type "onclick", "onmouseover", "onkeyup", etc... ?

Ce script renvoie au onclick un alert("undefined").

Merci à tous pour vos réponses.:)

Salut,

Tu as fait une erreur. Ce n'est pas :

Code:

1
2
3
4
5
6
 
var maClasse =  function()
     {
     this.element = null ;
     this.elementWidth = null ;
     }

mais :

Code:

1
2
3
4
5
6
 
var maClass =  function()
     {
     this.element = null ;
     this.elementWidth = null ;
     }

ceci dit un:

Code:

1
2
3
4
5
6
 
function maClass()
     {
     this.element = null ;
     this.elementWidth = null ;
     }

suffirait.

26/12/2010, 21h31
xess91

Ah oui merci, je corrige mon erreur de frappe de suite sur le post...;)

Mais ça ne résout pas le problème malheureusement.

essaie ceci cela doit marcher, en tout cas sous FF4.

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
 
<html>
<head>
<script>
function maClass()
     {
     this.element = null ;
     this.elementWidth = null ;
     }
 
maClass.prototype.config =function()
     {
     this.elementWidth = document.getElementById(this.element).offsetWidth ;
     document.getElementById(this.element).addEventListener('click',function(){monObjet.trying()}, false) ;
     }
 
maClass.prototype.trying=function()
     {
      alert(this.elementWidth) ;
     }
</script>
</head>
<body>
<span class="monSpan" id="monSpan">Push</span>
<script>
 
var monObjet = new maClass() ;
monObjet.element = "monSpan" ;
monObjet.config() ;
 
</script>
</body>
</html>

regarde bien l'ecriture des méthodes.

Merci c'est ce qu'il me fallait.

J'ai par conséquent deux questions :

La première => Est-ce que je peux faire ceci :
Code:

1 2 3 var object = this ; addEventListener('click',function(){object.trying()}, false)
?

La deuxième => Est-ce qu'en faisant ceci je suis compatible pour tous les navigateurs :
Code:

1 2 3 4 5 6 7 8 9 if(navigator.appName == "Microsoft Internet Explorer") { document.getElementById("x").attachEvent("onclick", maFonction); } else { document.getElementById("x").addEventListener("click", maFonction, false); }
?

26/12/2010, 22h02
xess91
En fait ce qui m'ennuie c'est qu'il faut appeler la fonction par le nom de l'instance de l'objet, ce qui peut poser des problèmes si le script est repris et instancié différemment.

Je viens de tester avec :
Code:

1 2 3 var object = this ; addEventListener('click',function(){object.trying()}, false)
Et ça ne fonctionne pas.:cry:

Citation:
Envoyé par xess91
Merci c'est ce qu'il me fallait.

J'ai par conséquent deux questions :

La première => Est-ce que je peux faire ceci :
Code:

1 2 3 var object = this ; addEventListener('click',function(){object.trying()}, false)
-->Non car le this, ici ne correspond encore à rien.
Lorsqu'il est utilisé au sein d'une classe, il correspond alors à l'objet qui est instancié, ici monObjet.
Lorsqu'il est associé à une balise, il désigne la balise en elle même et non plus l'objet instancié. C'est dommage mais incontournable.

La deuxième => Est-ce qu'en faisant ceci je suis compatible pour tous les navigateurs :
Code:

1 2 3 4 5 6 7 8 9 if(navigator.appName == "Microsoft Internet Explorer") { document.getElementById("x").attachEvent("onclick", maFonction); } else { document.getElementById("x").addEventListener("click", maFonction, false); }
?
Pour te permettre de voir l'avenir, sache que tous les navigateurs modernes (IE9, FF4...) comprennent:
Code:

1 2 document.getElementById("x").addEventListener("click", maFonction, false);
Pour ma part je palie à ce problème en faisant un affreux:
Code:

1 2 document.getElementById("x").setAttribute("onclick", "maFonction()");
que tous les navigateurs comprennent...;)

26/12/2010, 22h13
xess91

Merci Jnore,

Je vais creuser les orientations que tu m'as communiquées, en espérant trouver la solution la plus appropriée.

Si tu as le temps peux-tu revenir sur :

Citation:

Lorsqu'il est utilisé au sein d'une classe, il correspond alors à l'objet qui est instancié, ici monObjet.
Lorsqu'il est associé à une balise, il désigne la balise en elle même et non plus l'objet instancié. C'est dommage mais incontournable.

si

Citation:

Lorsqu'il est utilisé au sein d'une classe, il correspond alors à l'objet qui est instancié, ici monObjet.

"this" peut correspondre à l'instance, mais a quel endroit||moment dans la classe ?

Je t'en remercierai encore.:)

Citation:

Envoyé par xess91

"this" peut correspondre à l'instance, mais a quel endroit||moment dans la classe ?

Je t'en remercierai encore.:)

En fait tu t'en sers déjà au sein de ta classe, par exemple ici:
Code:

1 2 3 4 5 6 maClass.prototype.config =function() { this.elementWidth = document.getElementById(this.element).offsetWidth ; document.getElementById(this.element).addEventListener('click',function(){monObjet.trying()}, false) ; }
Le this ici fait référence à ton objet instancié (monObjet).
Si tu créeais une deuxieme instance:
Code:

1 2 var monObjet2 = new maClass()
le this au sein des méthodes correspondrait à ce nouvel objet.
Même avec ce nouvel objet créé, l'ancien objet est encore valide, avec ses méthodes et attributs qui lui sont propres.

Par contre le this en dehors de la classe, donc des méthodes, n'a plus la même valeur en dehors.

pour comprendre si tu fais:
Code:

1 2 <span onclick="alert(this.innerHTML)">test</span>
, le this correspondra à la balise span.

J'espère que tu comprends, ca n'est pas toujours facile d'expliquer !!!

26/12/2010, 22h48
xess91
Oui j'ai bien compris, donc :
Code:

1 2 3 4 5 maClass.prototype.config = function() { document.getElementById(this.element).addEventListener('click',function(){this.trying()}, false) ; }
le this.trying() correspond à l'instance puisqu'il se trouve dans une méthode et pourtant ça ne fonctionne pas, pourquoi ? Dsl de faire mon noob, mais c'est pour mieux comprendre les tenants et les aboutissants.

ou alors :

c'est parce que la ligne :

Code:

document.getElementById(this.element).addEventListener('click',function(){this.trying()}, false) ;

équivaut à
Code:

1 2 <img src="monimage.jpg" alt="" onclick="this.trying();" />
27/12/2010, 06h56
jnore
Citation:
Envoyé par xess91

Oui j'ai bien compris, donc :

c'est parce que la ligne :

Code:

document.getElementById(this.element).addEventListener('click',function(){this.trying()}, false) ;

équivaut à

Code:

1 2 <img src="monimage.jpg" alt="" onclick="this.trying();" />
C'est tout à fait ça, tu as compris. :ccool:

Je te remercie Jnore d'avoir pris le temps de me répondre.

Bonnes fêtes ! :)

EDIT : Voici la solution pour laquelle j'ai opté =>

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
<html>
<head>
<script>
function maClass()
     {
     this.element = null ;
     this.elementWidth = null ;
     this.instance = null ;
     }
 
maClass.prototype.config =function()
     {
     this.elementWidth = document.getElementById(this.element).offsetWidth ;
     //écriture de la méthode correspondante à l'objet/l'instance 
     document.getElementById(this.element).setAttribute("onclick", this.instance+"trying()") ; 
     }
 
maClass.prototype.trying=function()
     {
      alert(this.elementWidth) ;
     }
</script>
</head>
<body>
<span class="monSpan" id="monSpan">Push</span>
<script>
 
var monObjet = new maClass() ;
monObjet.element = "monSpan" ;
//permet de récupérer le nom de l'objet/instance créé(e)
monObjet.instance = "monObjet" ;
monObjet.config() ;
 
</script>
</body>
</html>

Ce qui écrit :

Code:

1
2
 
<span class="monSpan" id="monSpan" onclick="monObjet.trying()">Push</span>

Bonsoirs à tous,

Je relance le sujet car malheureusement ma réussite n'a été que de courte durée.

Il se trouve que
Code:

1 2 document.getElementById("x").setAttribute("onclick", "maFonction()");
n'est pas compatible Internet Explorer, j'ai testé tardivement mais c'est confirmé settAttribute avec onclick IE n'en veut pas, du coup je repose ma question :

Avec un script tel que celui-ci, comment garder la valeur des attributs, d'une méthode à l'autre, lors d'évènement de type "onclick", "onmouseover", "onkeyup", etc... ?

Pour le voir le script lire le premier POST

Merci à tous pour vos réponses.:)

______________________________________________________

Je suis complétement dans les choux avec cette histoire, je viens de tester ceci sur Mozilla :
Code:

1 2 3 4 5 6 7 8 9 if(this.playEl.addEventListener) { this.playEl.addEventListener("click", this.instance+".lecture()", false); } // NS6+ if(this.playEl.attachEvent) { // IE 5+ this.playEl.attachEvent("onclick", this.instance+".lecture()"); }
Et voila ce que je récolte :

Citation:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.monsite.net/ :: anonymous :: line 1495" data: no]

Help me please.:cry:

29/12/2010, 19h01
Bovino

Code:

document.getElementById("x").onclick = maFonction;

me semble une syntaxe plus correcte si maFonction ne prend pas de paramètre, sinon, c'est

Code:

document.getElementById("x").onclick = function(){maFonction()};

Sinon, j'avoue ne pas comprendre ce que tu veux dire par

Citation:

comment garder la valeur des attributs, d'une méthode à l'autre, lors d'évènement de type "onclick", "onmouseover", "onkeyup", etc... ?

Un exemple :

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
 
<script>
function maClass()
     {
     this.attribut1 = null;
     }
 
maClass.prototype.configuration = function()
     {
     this.attribut1 = this.attribut1 * 2;
//////this.attribut1 vaut 20
     alert(this.attribut1);
     document.getElementById("monBouton").onclick = this.dire; //ou classMa.dire
     }
 
maClass.prototype.dire = function()
     {
//////this.attribut1 vaut undefined la valeur à été perdu
     alert(this.attribut1);
     }
 
var classMa = new maClass();
classMa.attribut1 = "10";
classMa.configuration();
</script>

29/12/2010, 19h40
Bovino
Non, les événements génèrent une fonction anonyme appelée par un élément HTML, this n'est donc plus valable, il faut créer une référence au this de ton constructeur et travailler dessus :
Code:

1 2 var that = this; document.getElementById("monBouton").onclick = function(){that.dire()};
Il est à noter que that étant une référence à this, il évolue de la même manière ;)
29/12/2010, 19h47
xess91
Merci beaucoup pour votre soutien, sans avoir remis en cause vos dires, j'ai testé sur IE, Moz, Chrome, Opera et Safari et ça fonctionne très bien.

J'avais pourtant essayé :
Code:

1 2 3 var that = this; document.getElementById("monBouton").onclick = that.dire;
bien sur qui ne fonctionne pas, du coup je ne suis pas allé plus dans les tentatives DOM niveau 0.

Encore merci.:)
29/12/2010, 19h57
Bovino

Citation:

sans avoir remis en cause vos dires, j'ai testé sur IE, Moz, Chrome, Opera et Safari et ça fonctionne très bien.

La confiance n'exclue pas le contrôle ! :)

:ccool: