[Javascript] set handler dans une classe

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Javascript] set handler dans une classe

anapajari

s/travail/glanding on hfr/gs;

Alors voila j'ai cette classe javascript:

Code :

function Test(){
this.newDiv = document.createElement('div');
//setting needed attribute for div
this.newDiv.setAttribute('id', 'div'+(++this.constructor.divMaxId));
//setting click handler on div with public method
this.newDiv.onmousedown=function(event) { publicGetId();}
//setting click handler on div with private method
this.newDiv.onmouseup=function(event) { privateGetId();}
//add text to node
this.newDiv.appendChild(document.createTextNode('div ayant pour id:'+this.constructor.divMaxId));
//add node to document
document.getElementById('divContainer').appendChild(this.newDiv);
// PRIVILEGED METHODS
this.privateGetId = function(){ alert(this.newDiv.getAttribute('id')); }
}
}
// PUBLIC METHODS
Test.prototype.publicGetId = function (){ alert(this.newDiv.getAttribute('id'));}
// PROTOTYPE PROPERTY
Test.divMaxId=0; //max id of div

et cette page html pour tester:

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Me" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>Maquette</title>
<script type="text/javascript" src="Test.js"></script>
<script type="text/javascript" >
function doIt(){
var a = new Test;
}
</script>
<style type="text/css" media="all">
div{
background-color: blue;
border: 1px solid black;
}
</style>
</head>
<body>
<input type="button" onclick="doIt()" value="test"/>
<div id="divContainer" style="border:0px;">  </div>
</body>
</html>

La construction des objets Test se passe très bien.
Le problème se trouve sur les handlers que je rajoute sur chacun d'eux:

Code :

...
//setting click handler on div with public method
newDiv.onmousedown=function(event) { publicGetId();}
//setting click handler on div with public method
newDiv.onmouseup=function(event) { privateGetId();}
...

Dans les deux cas ( et aussi bien sous FF que IE ) les fonctions ne sont pas connues.
Je pense savoir pourquoi: les deux fonctions publicGetId et privateGetId ne sont connues que des objets Test. Or elles sont appelées par un click sur le div crée et non sur mon objet, donc ... ça marche pô!!!

D'ou ma question: Y a-t-il un moyen d'appeler des fonctions de ma classe dans ces handlers ou dois-je obligatoirement déclarer ces fonctions en dehors de ma classe ( ce qui ne me plairait pas trop)?

D'avance merci!

[edit: commentaires ajoutés]

Message édité par anapajari le 02-11-2005 à 17:45:31

Publicité

fxoxo

Bonjour,
Normallement, il n'y a pas de problèmes pour utiliser les handlers dans un objet ...
Essaye de faire l'assignation de l'handler après avoir ajouté le noeud au document (this.newDiv.onmousedown=function(event) { publicGetId();} après
document.getElementById('divContainer').appendChild(this.newDiv); )

sinon, avec cette méthode, tu risque de ne pas récupérer l'event, voici un exemple de ce que j'utilise:

Code :

this._inputField.onkeyup=function(){getKeyEvent(event)};//pour IE
this._inputField.onkeyup=function(e){getKeyEvent(e)};//Pour Gecko

Sinon, va faire un tour dans sur le site http://www.quirksmode.org/ rubrique Javascript/event, tu y trouvera une foule d'information pour t'aider ...

Message édité par fxoxo le 02-11-2005 à 18:30:28

---------------
stpfilms.free.fr

anapajari

s/travail/glanding on hfr/gs;

D'abord merci mais

Je n'ai pas dit qu'il y avait un problème pour utiliser un handler dans mon objet mais plutot pour utiliser une méthode de mon objet dans le handler ...

En gros mon problème c'est que quand je déclare la fonction de mon handler, le 'this' que j'y mets ne represente pas l'objet de ma classe Test mais l'objet (div) sur lequel l'event a lieu.
Donc fort logiquement il me sort que la fonction publicGetId est inconnue.

[edit]
Ah et mettre le handler après que le div ait été ajouté cela ne change rien
[/edit]

Message édité par anapajari le 03-11-2005 à 09:49:52

anapajari

s/travail/glanding on hfr/gs;

J'ai trouvé une solution pour ceux que ça interesseraient:

Code :

function Test(){
this.newDiv = document.createElement('div');
//setting needed attribute for div
this.newDiv.setAttribute('id', 'div'+(++this.constructor.divMaxId));
//add text to node
this.newDiv.appendChild(document.createTextNode('div ayant pour id:'+this.constructor.divMaxId));
//add node to document
document.getElementById('divContainer').appendChild(this.newDiv);
/*** la ruse est ici: on recopie l'objet en cours de creation pour pouvoir appeler ses methods dans le handler.
on ne peut pas se servir dans this dans le handler car cela serait l'objet cliqué et non l'objet de ma classe
***/
var obj = this;
//setting click handler on div with public method
this.newDiv.onmousedown=function(event) { obj.publicGetId();}
//setting click handler on div with private method
this.newDiv.onmouseup=function(event) { obj.privateGetId();}
// PRIVILEGED METHODS
this.privateGetId = function(){ alert(this.newDiv.getAttribute('id')); }
}
// PUBLIC METHODS
Test.prototype.publicGetId = function (){ alert(this.newDiv.getAttribute('id'));}
// PROTOTYPE PROPERTY
Test.divMaxId=0; //max id of div

Message édité par anapajari le 03-11-2005 à 10:22:09

FORUM HardWare.fr

Programmation

HTML/CSS

[Javascript] set handler dans une classe

Sujets relatifs
ecriture variable en javascript	Javascript qui contrôle la taille d'ouverture d'une fenêtre
recupere ou mettre a jour un tableau de double dans une classe	[Javascript]2 Frame, fermer/ouvrir celle de gauche[Résolu]
[ Débutant ] Erreur d'exécution en Javascript	Probleme en C++ de classe
[JavaScript] question très bête !!!	Problème d'enregistrement des données dans une classe
Rendre un javascript compatible sous firefox	[JAVASCRIPT??] Sélectionnez une feuille CSS
Plus de sujets relatifs à : [Javascript] set handler dans une classe

Page générée en 0.074 secondes