Objets et evenements en javascript?

Marsh Posté le 08-12-2005 à 13:52:30

Salut à tous,

J'ai voulu approfondir ma connaissance du gestionnaire d'evenement javascript en réalisant un drag'n'drop tout bête.

Tout se passait bien, jusqu'à ce que je me mette en tête de mettre le tout sous la forme d'un objet...

Après avoir essayer de tourner le tout sous plusieurs formes, tester différentes syntaxes pour créer mes objets etc... J'en suis arrivé au constat suivant :
Si je veux définir une capture d'evenement où mafonction est une méthode de monobjet, du type :

Code :

document.onmousemove = monobjet.mafonction;

Je constate que cette méthode est incapable d'accèder aux attribut de l'objet...

Plus concretement :

Code :

var Objet = function(){
this.foo = 'bar';
this.mafonction = function(){
alert(this.foo);
}
}
var monobjet = new Objet();
document.onmousedown = monobjet.mafonction;

En cliquant, on obtient bien une alerte, mais foo est "undefined".

Je ne maitrise pas assez bien la POO, ni même les gestionnaires d'evenements pour comprendre ce qui manque, ou ce qui est incorrect/impossible/incohérent...

Et c'est bien pour ça que je vous demande votre avis...
Alors, c'est grave docteur? Est-ce que je dois tout de suite commencer à manger mon clavier?

Reply

Marsh Posté le 08-12-2005 à 13:52:30

Reply

Marsh Posté le 08-12-2005 à 14:02:24

J'ai eu a peu près le même problème

En fait quand ta fonction 'mafonction' est appelée, l'objet courrant ( this) n'est pas ton objet (Objet) mais l'objet l'ayant appelé ( dans ton cas document).

Du coup moi j'ai rusé en faisant:

Code :

var Objet = function(){
var self = this;
this.foo = 'bar';
this.mafonction = function(){
alert(self.foo);
}
}

Message édité par anapajari le 08-12-2005 à 14:02:50

Reply

Marsh Posté le 08-12-2005 à 14:16:23

Je vois ce que tu veux dire, et effectivement ça fonctionne comme ça.
Merci.

Mais en définissant un variable self comme ça, celle ci n'est plus un attribut de mon objet.
Du coup, tout mes objets vont devoir partager la même variable self...
Me trompe-je?

N'est-il pas possible de définir le bon objet courant?

Reply

Marsh Posté le 08-12-2005 à 14:26:37

Non, en definissant self comme ça c'est une attribut "privé" de ton objet ( donc non accessible hors de ta classe), mais il est bien spécifique à chaque objet.

Reply

Marsh Posté le 08-12-2005 à 14:59:25

Autant pour moi :pt1cable:
Va falloir que je revois ce chapitre aussi alors... j'croyais qu'une variable definit avec var etait accessible par tout le script (ce qui doit être vrai dans une fonction quelconque, mais pas dans la metohde d'un objet... la boulette)

Merci encore.
A+

Reply

Marsh Posté le 08-12-2005 à 17:35:39

Après correction, mon drag'n'drop basique fonctionne, alors pour vous (te, anapajari) remercier, voici le resultat de mon dur labeur (je serais ravi d'accueillir vos remarques, suggestions, critiques, meme severes, mon but ici etant d'apprendre qlq chose) :

http://dl-1.free.fr/52616e646f6d49 [...] /test.html
(au passage merci à Free... même si c pas la fonctionnalité première, leur nouveau truc de Download/Upload sert bien...)
Remarque : le lien ne sera valable que 24h. Si mon travail d'artiste donne lieu à un flot continue de commentaires, je mettrais ça en ligne plus proprement...

Reply

Marsh Posté le 08-12-2005 à 18:15:02

Bin c'est pas mal

Mais:
1- ton constructeur d'object plutot que de lui passer un div, je lui aurais fait créer le div ( fonction dom:createElement, appendChil) afin de
2- Déclarer tes onmouse directement dans ton objet, ce qui te permettait
3- De pas avoir besoin d'un objet Dragged

J'ai un truc qui marche comme ça, si ça t'interesse je te montrerais!

Reply

Marsh Posté le 09-12-2005 à 12:03:59

Mais si je fais un truc du genre

Code :

monobjet.onmousemove = mafunction()

mafonction sera effectivement appelé qd je bouge ma souris, mais seulement si je la bouge au dessus de cette div, non?

A priori pour un drag'n'drop c'est pas trop genant vu que justement tu deplaces ton objet en lui cliquant dessus etc... Mais en réalité, si tu bouges trop vite, le pointeur à le temps de sortir de la div avant que ta fonction soit re appelée...

Du coup, ne vaut-il pas mieux attraper tout les evenement du "document" (de "window"?)?

Je me soupçonne d'avoir raté un truc mais bon...

Message cité 1 fois

Reply

Marsh Posté le 09-12-2005 à 12:27:50

Si mais rien ne t'empeches d'attraper les evenements du document dans un evenement de ton objet ...

Un truc dans ce genre la:

Code :

/*** click sur ton objet ***/
this.MouseDown = function MouseDown(event) {
var self=this;
/*** appel de la fonction moove de ton objet sur un moove de document ***/
document.onmousemove=function(event){self.mooveDrag(event);}
/*** appel de la fonction qui arrete le moove de ton objet sur mouse up***/
document.onmouseup=function(event){self.stopDrag(event);}
/***
d'autres trucs si tu as besoin
***/
}

Reply

Marsh Posté le 09-12-2005 à 12:51:00

solcarlus13 a écrit :

Mais si je fais un truc du genre

Code :

monobjet.onmousemove = mafunction()

mafonction sera effectivement appelé qd je bouge ma souris, mais seulement si je la bouge au dessus de cette div, non?

A priori pour un drag'n'drop c'est pas trop genant vu que justement tu deplaces ton objet en lui cliquant dessus etc... Mais en réalité, si tu bouges trop vite, le pointeur à le temps de sortir de la div avant que ta fonction soit re appelée...

Du coup, ne vaut-il pas mieux attraper tout les evenement du "document" (de "window"?)?

Je me soupçonne d'avoir raté un truc mais bon...

Pour les drag'n'drop, t'as des onmouseup et onmousedown (pas certain du nom des fonctions) et là, tu t'en fiches de savoir si t'es entre de survoler vu que le navigateur fera réagir de lui même l'élément qu'était sous le curseur au moment où tu appuis ou relache le bouton de la souri.

Reply

Objets et evenements en javascript?

Sujets relatifs:

Leave a Replay