[Javascript] set handler dans une classe

Marsh Posté le 02-11-2005 à 17:08:46

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

Reply

Marsh Posté le 02-11-2005 à 17:08:46

Reply

Marsh Posté le 02-11-2005 à 18:29:50

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

Reply

Marsh Posté le 03-11-2005 à 09:48:33

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

Reply

Marsh Posté le 03-11-2005 à 10:21:35

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

Reply

[Javascript] set handler dans une classe

Sujets relatifs:

Leave a Replay