Discussion :

[tepaze]

Bonjour,

Comme l'indique le titre, je souhaite savoir s'il est possible d'ajouter un listener perso à un objet JS perso.

Genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var obj = 
{
	a : "A"
	, action : function()
	{
		console.log(a);
	}
}
obj.addListener(obj.a, action);

Je ne sais pas si je me suis bien faire comprendre...

[SpaceFrog]

?
mets le dans la fonction action ...?

[tepaze]

Huummmm,

En fait je ne sais pas utiliser la fonction addListener... Et ce que je veux c'est une écoute de variable qui declanche une action.

et accessoirement est ce possible en jQuery ?

Est ce plus clair ?

[SpaceFrog]

ce n'est possible en js ...

tu peux soit passer par un input sur lequel tu as un onchange

sinon faut passer par un setInterval

[Bovino]

addListener() n'existe pas en JavaScript !
Sinon, les événements sont liés à des objets HTML, donc ce que tu fais n'est pas valable.
Sinon, il existe bien la méthode watch sur un objet, mais elle est propriétaire et compatible uniquement Firefox il me semble.

[p3ga5e]

Les gestionnaire d’évènements n’existe pas de base en JavaScript, mais doit certainement exister en jQuery (vu la popularité de celui-ci) ! Non ?

Sinon ce n’est pas trop compliqué à l’implémenter soit même !
Petit ébauche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function EventEmitter()
{
	var listeners = {};
 
	this.addListener = function(event, listener)
	{
		if(!listeners[event])
			listeners[event] = [];
		listeners[event].push(listener);
	}
 
	this.emit = function(/*event, [arg1], [arg2], [...]*/)
	{	
		var params =[];
		params.push.apply(params,arguments);
		var event = params.shift();
		if(listeners[event])
		{
			for(var l=0;l<listeners[event].length;l++)
				(listeners[event][l]).apply(null,params);
		}
	}
}
 
function PropertiesListeners()
{
	this.set = function (property,value)
	{
		var oldvalue = this[property];
		this[property]=value;
		this.emit(property+" change",value,oldvalue);
	}
};
PropertiesListeners.prototype = new EventEmitter();
 
var obj = new PropertiesListeners();
obj.addListener('Name change',function(val)
{	
	console.log('Listener 1 : Name = '+val);
})
obj.set('Name','pierre');
obj.addListener('Name change',function(newval,oldval)
{
	console.log('Listener 2 : Name '+oldval+' change to '+ newval);
})
obj.set('Name','paul');	
obj.Age = 25;
obj.addListener('Age change',function(newval,oldval)
{
	console.log('Listener 3 : Age '+oldval+' change to '+ newval);
})
obj.set('Age',32);

[tepaze]

Merci pour les pistes proposées :-)

J'ai besoin d'un eclaircissement neanmoins, que signifie apply dans ce contexte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

params.push.apply(params,arguments);

et dans celui ci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(listeners[event][l]).apply(null,params);

Bien cordialement

Merci

[p3ga5e]

La méthode apply du prototype Function, permet d’exécuter la fonction en lui spécifiant son context ( ce que référencera this durant son exécution) et la pile d’arguments sous la forme d’un Array.

Dans la fonction emit je recopie tous les arguments dans un nouveau tableau nommé params en utilisant la méthode push du prototype Array. Je les recopie car arguments ne référence pas un "vrais" prototype Array, en tous cas par sur l’interpréteur V8 de Chrome. Or, pour la fonction emit, j’ai besoin de retirer le 1er elements de pile d’argument, qui représente l’identifiant de l’évènement, par la méthode shift et de passer le reste de la pile d’arguments à chacun d’un listeners.

Par contre un gestionnaire d’évènements doit OBLIGATOIREMENT exister dans jQuery, car c’est tous de même un mécanisme de base pour tous framework JavaScript