Prototypage et écouteur d'évènement

**xess91** · 26/12/2010, 21h01

Bonsoirs à tous,

Je commence de suite par le vif du sujet, le script...:

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

jnore · 26/12/2010, 21h23

Salut,

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

Code :

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

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

mais :

Code :

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

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

jnore · 26/12/2010, 21h24

ceci dit un:

Code :

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

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

suffirait.

**xess91** · 26/12/2010, 21h31

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

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

jnore · 26/12/2010, 21h45

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

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

**xess91** · 26/12/2010, 21h56

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 :

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

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 :

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

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);
     }

?

**xess91** · 26/12/2010, 22h02

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 :

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

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

Et ça ne fonctionne pas.

jnore · 26/12/2010, 22h05

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 :

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

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 :

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

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 :

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

1
2
 
 document.getElementById("x").addEventListener("click", maFonction, false);

Pour ma part je palie à ce problème en faisant un affreux:

Code :

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

1
2
 
 document.getElementById("x").setAttribute("onclick", "maFonction()");

que tous les navigateurs comprennent...

**xess91** · 26/12/2010, 22h13

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 :

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

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.

jnore · 26/12/2010, 22h25

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 :

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

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 :

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

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 :

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

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

**xess91** · 26/12/2010, 22h48

Oui j'ai bien compris, donc :

Code :

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

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 :

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

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

équivaut à

Code :

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

1
2
 
<img src="monimage.jpg" alt="" onclick="this.trying();" />

jnore · 27/12/2010, 06h56

Envoyé par xess91

Oui j'ai bien compris, donc :

c'est parce que la ligne :

Code :

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

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

équivaut à

Code :

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

1
2
 
<img src="monimage.jpg" alt="" onclick="this.trying();" />

C'est tout à fait ça, tu as compris.

**xess91** · 27/12/2010, 10h47

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 :

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

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

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

**xess91** · 29/12/2010, 18h33

Bonsoirs à tous,

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

Il se trouve que

Code :

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

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 :

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

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 :

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.

**Bovino** · 29/12/2010, 19h01

Code :

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

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

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

Code :

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

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

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

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

**xess91** · 29/12/2010, 19h25

Un exemple :

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

**Bovino** · 29/12/2010, 19h40

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 :

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

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

**xess91** · 29/12/2010, 19h47

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 :

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

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.

**Bovino** · 29/12/2010, 19h57

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 !

Prototypage et écouteur d'évènement

JavaScript

Discussions similaires

Partager

Partager