Geckozone

Bonjour,

Je débute en POO, et la je bloque depuis 2 jours...

si j'associe depuis une fonction d'un objet des éléments à un event (par exemple "click"), comment faire lire et ecrire les proriétés de l'objet lorsque la fonction associée à "click" s'execute ?

Voici une exmple de ce que j'ai fais (et qui ne marche pas donc) :

Code : Tout sélectionner

function ColumnsCollection(parameters) {
	
	this.container = document.getElementById(parameters.container);
	this.items = this.container.getElementsByTagName(parameters.items);
	this.actualColumn;
		
  	this.register();                     
		
}
ColumnsCollection.prototype.add(){
        this.actualColumn = // Et ici j'écris une référence au DIV sur laquel j'ai cliqué, sauf que this fait référence au DIV à présent, donc this.actualColumn n'existe pas...
}


ColumnsCollection.prototype.register = function() { //anal
	for (var i=0; i < this.items.length; i++) {
		var cible = this;
		cible.addEventListener("click", this.add, true);
	};
}
                                                                                                                                     
window.onload = function() {
	   
	document.getElementsByTagName('body')[0].myColumnsCollection = new ColumnsCollection ( 
	   {
			container: 'content',
			items: 'div',
		}
	);
}

Merci

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.4) Gecko/20070509 Camino/1.5 (MultiLang)

quand tu enregistres une fonction sur un événement, par exemple avec :

Code : Tout sélectionner

element.addEventListener("click",  myFunction, false);

le premier argument passé à la fonction myFunction est justement un objet event.
Tu peux donc récupérer des informations, comme l'élément qui à déclencher l'évenement :

Code : Tout sélectionner

function myFunction (e) {
   alert(e.target);
}

au sein de ton code, tu as donc un premier soucis (résolvable

), pouvoir déclarer ta fonction membre en fonction du this correspondant à ton objet ColumnsCollection et non à l'élément DOM.
Une parade est :

Code : Tout sélectionner

var cible = this; // this correspond à ton objet
cible.addEventListener("click", cible.add, true);
// dans la fonction add déclenchée par l'évenement, this correspond à l'élément DOM déclencheur

Attention, ceci est valable pour les navigateurs respectant les standards DOM.

Pour IE, il faut contourner en utilisant l'objet window.event.
exemple :

Code : Tout sélectionner

function myFunction(e) {
    if (!e) e = window.event;
    alert(e.target);
}

voir cet article pour plus d'explication.

Merci pour ton aide. Je n'ai pas réussi à utiliser ta méthode, car j'ai eu une erreur comme quoi "cible" n'avait pas cette méthode... Mais je dois avouer que je n'ai pas trop insisté.

En revanche j'ai adapté ça du O'Reilly, qui semble marcher :

Code : Tout sélectionner

function ColumnsCollection(parameters) {
	
	this.container = document.getElementById(parameters.container);
	this.items = this.container.getElementsByTagName(parameters.items);
	this.minWidth = parameters.minWidth;
	this.maxWidth = parameters.maxWidth;
	this.step = parameters.step;
	this.actualColumn;
	this.closingColumns = {};
		
  	this.register();                     
		
}

ColumnsCollection.prototype.handleEvent = function(e){
	alert(this.minWidth+"\n"+e.target);
}

ColumnsCollection.prototype.register = function() {
	for (var i=0; i < this.items.length; i++) {
		this.items[i].setAttribute("style", "width:120px;float:left");
		ColumnsCollection.registerObjectEventHandler(this.items[i], "click", this, true)
	};
}

ColumnsCollection.registerObjectEventHandler = function(element, eventtype, listener, captures) {
    element.addEventListener(eventtype,
                             function(event) { listener.handleEvent(event); },
                             captures);
}
                                                                                                                                     
window.onload = function() {
	
	document.getElementsByTagName('body')[0].myColumnsCollection = new ColumnsCollection ( 
	   {
			container: 'content',
			items: 'div',
			minWidth: 120,
			maxWidth: 350,
			step: 5
		}
	);
}

Je n'ai pas eu le temps d'aller plus loin. Je dois utiliser des setInterval pour agrandir progressivement mes div et je ne sais pas trop encore comment gérer ça (où enregistrer les setIntervals, etc...). Pouvez-vous me dire ce que vous pensez de cette solution ?

Merci

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.1.4) Gecko/20070509 Camino/1.5 (MultiLang)

Geckozone

Gestion des events et POO

Gestion des events et POO