11548 sujets

JavaScript, DOM et API Web HTML5

[résolu] Problème d'heritage (ou autre)

Bonjour à tous,

Mon problème est le suivant :

Je n'arrive pas à récupérer une information. Pour être plus précis dans mon explication, je vous joins un exemple :


<!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="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>

<input type="button" value="test classe 1" onclick="handleMaClasse1.test1()" id="monBouton"/>
<br/>
<input type="button" value="test classe 2" id="monBouton2"/>
	
<script type="text/javascript">
	/*
		Premier exemple -> pas de probleme
	*/
	function maClasse1(){
		this.arg1 = "blabla";
		this.arg2 = "toto";
	}
	maClasse1.prototype.test1 = function(){
		alert(this.arg1);
	}
	var handleMaClasse1 = new maClasse1();
	
	
	/*
		Deuxieme exemple ->  impossible de récuperer 'monObj'
	*/
	function addEvent(oObj, eEvent, fCallback){
		oObj = document.getElementById(oObj);
		window.attachEvent ? oObj.attachEvent('on'+eEvent, fCallback) : oObj.addEventListener(eEvent, fCallback, false);
		return true;
	}
	
	function maClasse2(){
		this.monObj = 'monBouton2';
		addEvent('monBouton2', 'click', this.test1);
	}
	maClasse2.prototype.test1 = function(event){
		alert(this.monObj);
	}
	var handleMaClasse2 = new maClasse2();
</script>

</body>
</html>


Dans le premier exemple, j'arrive bien à récupérer la variable 'arg1' de mon objet 'maClasse1'
Dans le second exemple, impossible de récupérer la variable 'monObj'.

Si quelqu'un peut me donner une réponse à mon problème et m'expliquer ce que j'aurai (ou pas) due faire ce serait sympa.

Merci d'avance
Modifié par Kadheus (13 Mar 2008 - 16:29)
Salut Kadheus

Simplement parce que le mot clé this dans la méthode test1 de maClasse2 ne fait pas référence à l'objet handleMaClasse2. Avec Firefox & co, ce this fera référence à l'élément DOM sur lequel l'event a eu lieu. Avec naze IE, pire, ce sera l'objet window...

Le mieux étant de faire ta propre couche événementielle.

Pour info (et même si je ne l'aime pas du tout), celle faite par edwards
*Edit* Ou encore les fonctions du PPK addEvent contest

Bon courage
Modifié par Ze Nenex (05 Mar 2008 - 02:11)
Merci beaucoup Ze Nenex d'avoir répondu à mon problème. Les solutions que tu proposes ont l'air intéressantes, (notamment la deuxième).

A+
Juste pour information, j'ai trouvé la solution.
Pour passer l'objet par référence, il suffit de 'binder' l'évènement.

J'aurai appris encore un truc aujourd'hui...

Ciao
Modérateur
Salut, Smiley smile

Tu peux initialiser ta fonction aussi :
function maClasse2(){
	this.monObj = 'monBouton2';
	addEvent('monBouton2', 'click', this.test1(this.monObj));
}
maClasse2.prototype.test1 = function(monObj){
	return function(e) {
		alert(monObj);
		return stopEvent(e);
	}
}
var handleMaClasse2 = new maClasse2();

Modifié par koala64 (11 Mar 2008 - 19:46)
Salut,

J'avais déjà essayé cette méthode mais je pers l'Event en passant des paramètres. A moins qu'il y ai une autre solution...

Mais merci quand même.

A+
Modérateur
Salut,

Tu ne perds pas l'event dans le bout de code que je t'ai donné; ça fonctionne très bien... Smiley rolleyes

En fait, au chargement, tu exécutes directement this.test1 et c'est à ce moment que le passage de paramètres s'effectue.
Par la suite, au clic, this.test1 retourne une fonction anonyme qui, elle, contient l'event en tant que paramètre.
Ok je prends note.

Je vous fournis quand même la solution que j'ai trouvé car c'est très intéressant (pour ma part) :


Function.prototype.bindEvent = function(object){
	var __method = this;
	return function(event) { return __method.apply(object, [event || window.event]); }
}

function addEvent(oObj, eEvent, fCallback){
		oObj = document.getElementById(oObj);
		window.attachEvent ? oObj.attachEvent('on'+eEvent, fCallback) : oObj.addEventListener(eEvent, fCallback, false);
		return true;
}

function maClasse2(){
	this.monObj = 'monBouton2';
	this.eventTest1 = (this.test1).bindEvent(this);
	addEvent('monBouton2', 'click', this.eventTest1);
}

maClasse2.prototype.test1 = function(event){
	alert(this.monObj);
}

var handleMaClasse2 = new maClasse2();
Sujet clos
Aller à