[Résolu] attribuer un evenement dynamique a un objet par lifaon74 - page 1

Il y a les getters/setters mais c'est pas compatible avec IE.
Sinon, tu fais comme tout le monde :

var obj = ( function ( ) {
    return {
        var a = 0;
        this.getA = function ( ) {
            return a + 1;
        };
        this.setA = function ( value ) {
            return ( a = value - 1);
        };
    };
}( ) );

Et après, tu peux faire plus général en faisant un méthode get et une méthode set pour les objets qui se charge de créer un objet qui référence tout ce qu'il faut etc.
J'avais commencé un truc comme ça :

/***** getters *****/
Object.prototype.__init__ = (function() {
//generic functions
	//returns the storage object for a property and initializes it if needed
	function getStorage(property, storage) {
		if (!isset(storage[property])) {
			storage[property] = {};
		}
		return storage[property];
	}
	//sets a property
	function setProperty(data, p, key) {
		if (data.key === key) {
			if (isset(p) && isset(p.name)) {
				var obj = getStorage(p.name, data.storage);
				if (isset(p.value)) {
					obj.value = p.value;
				}
				if (isset(p.type)) {
					obj.type = p.type;
				}
				if (isset(p.getter)) {
					obj.getter = p.getter;
				}
				if (isset(p.setter)) {
					obj.setter = p.setter;
					if (p.init) {
						data.that.set(p.name);
					}
				}
				return data.that;
			} else {
				XJSLib.call("throwError", "(" + data.that.toString() + ").setProperty needs at least an object with a name property as second parameter!");
			}
		} else {
			XJSLib.call("throwError", "(" + data.that.toString() + ").setProperty needs the key returned by the __init__() method as first parameter!");
		}
	}
	//sets several properties
	function setProperties(data, p, key) {
		p.forEach(function(p, name) {
			p.name = name;
			setProperty(data, p, key);
		});
		return data.that;
	}
	//getter to get a property"s value from outside
	function get(data, property, key) {
		var obj = getStorage(property, data.storage);
		if (isset(obj.type) && obj.type.is("private") && key !== data.key) {
			XJSLib.call("throwError", "Getting (" + data.that.toString() + ")." + property + " is forbidden!");
		} else {
			return isset(obj.getter) ? obj.getter(obj.value) : obj.value;
		}
	}
	//setter to set a property"s value from outside
	function set(data, property, value, key) {
		var storage = getStorage(property, data.storage);
		if (key === data.key) {
			return storage.value = value;
		} else if(!isset(storage.type) || !storage.type.is("protected", "private")) {
			if (isset(storage.setter)) {
				value = storage.setter(value);
			}
			if (isset(value)) {
				storage.value = value;
			}
			return storage.value;
		} else {
			XJSLib.call("throwError", "Setting (" + data.that.toString() + ")." + property + " is forbidden!");
		}
	}
	function call(data, method, arguments) {
		var fct = get(data, method);
		if (isset(fct) && fct.varType.is("function")) {
			return fct.apply(this, arguments);
		} else {
			XJSLib.call("throwError", "First argument given to (" + this.toString() + ").call, (" + method + "), isn't a function!");
		}
	}
//return the function put as __init__ method for objects so that it can call all the previously declared functions
	return function() {
		var data = {
			that: this,//trick to be able to acces the this object inside functions
			key: {},
			storage: {}//the storage for all variables
		};
		//getters and setters to be used from outside
		this.get = function(property, key) {
			return get(data, property, key);
		};
		this.set = function(property, value, key) {
			return set(data, property, value, key);
		};
		this.call = function(method) {
			return call(data, method, Array.prototype.slice.call(arguments).splice(1));
		};
		//methods needing the key
		this.setProperty = function(p, key) {
			return setProperty(data, p, key);
		};
		this.setProperties = function(p, key) {
			return setProperties(data, p, key);
		};
		//return the key
		return data.key;
	};
}());

Le code complet du fichier au cas où tu ne comprendrais pas certains passages :

/***** CORE *****/
//isset function
function isset(obj) {
	return typeof obj !== "undefined";
}

//function"s prototypes implementing method
Function.prototype.implement = function(property, value, do_not_override) {
	if (isset(property) && isset(value)) {
		if (!isset(this.prototype[property]) || !do_not_override) {
			this.prototype[property] = value;
		}
		return this;
	} else {
		XJSLib.call("throwError", "Function.implement needs a property's name as first argument and a value as second argument!");
	}
};

//attribute to detect type
Object.implement("varType", "object");
Array.implement("varType", "array");
Function.implement("varType", "function");
RegExp.implement("varType", "regex");
Date.implement("varType", "date");
String.implement("varType", "string");
Number.implement("varType", "number");
Boolean.implement("varType", "boolean");

//easy test method
Object.implement("is", function() {
	var is_object = this.varType === "object" || this.varType === "array" || this.varType === "function",
	obj = is_object ? this : this.valueOf();
	for (var i=0, l=arguments.length; i<l; ++i) {//forEach ++
		if (obj === (is_object ? arguments[i] : arguments[i].valueOf())) {
			return true;
		}
	}
	return false;
});

//forEach method in case it doesn"t exist yet
Array.implement("forEach", function(fct, this_obj)	{
	if (isset(fct) && fct.varType.is("function")) {
		for (var i=0, l = this.length >>> 0; i<l; ++i) {
			if (i in this) {
				fct.call(this_obj, this[i], i, this);
			}
		}
	} else {
		XJSLib.call("throwError", "Array.forEach needs a function as first argument");
	}
}, true);
Object.implement("forEach", function(fct, this_obj)	{
	if (isset(fct) && fct.varType.is("function")) {
		for (i in this) {
			if (this.hasOwnProperty(i)) {
				fct.call(this_obj, this[i], i, this);
			}
		}
	} else {
		XJSLib.call("throwError", "Object.forEach needs a function as first argument");
	}
}, true);





/***** getters *****/
Object.prototype.__init__ = (function() {
//generic functions
	//returns the storage object for a property and initializes it if needed
	function getStorage(property, storage) {
		if (!isset(storage[property])) {
			storage[property] = {};
		}
		return storage[property];
	}
	//sets a property
	function setProperty(data, p, key) {
		if (data.key === key) {
			if (isset(p) && isset(p.name)) {
				var obj = getStorage(p.name, data.storage);
				if (isset(p.value)) {
					obj.value = p.value;
				}
				if (isset(p.type)) {
					obj.type = p.type;
				}
				if (isset(p.getter)) {
					obj.getter = p.getter;
				}
				if (isset(p.setter)) {
					obj.setter = p.setter;
					if (p.init) {
						data.that.set(p.name);
					}
				}
				return data.that;
			} else {
				XJSLib.call("throwError", "(" + data.that.toString() + ").setProperty needs at least an object with a name property as second parameter!");
			}
		} else {
			XJSLib.call("throwError", "(" + data.that.toString() + ").setProperty needs the key returned by the __init__() method as first parameter!");
		}
	}
	//sets several properties
	function setProperties(data, p, key) {
		p.forEach(function(p, name) {
			p.name = name;
			setProperty(data, p, key);
		});
		return data.that;
	}
	//getter to get a property"s value from outside
	function get(data, property, key) {
		var obj = getStorage(property, data.storage);
		if (isset(obj.type) && obj.type.is("private") && key !== data.key) {
			XJSLib.call("throwError", "Getting (" + data.that.toString() + ")." + property + " is forbidden!");
		} else {
			return isset(obj.getter) ? obj.getter(obj.value) : obj.value;
		}
	}
	//setter to set a property"s value from outside
	function set(data, property, value, key) {
		var storage = getStorage(property, data.storage);
		if (key === data.key) {
			return storage.value = value;
		} else if(!isset(storage.type) || !storage.type.is("protected", "private")) {
			if (isset(storage.setter)) {
				value = storage.setter(value);
			}
			if (isset(value)) {
				storage.value = value;
			}
			return storage.value;
		} else {
			XJSLib.call("throwError", "Setting (" + data.that.toString() + ")." + property + " is forbidden!");
		}
	}
	function call(data, method, arguments) {
		var fct = get(data, method);
		if (isset(fct) && fct.varType.is("function")) {
			return fct.apply(this, arguments);
		} else {
			XJSLib.call("throwError", "First argument given to (" + this.toString() + ").call, (" + method + "), isn't a function!");
		}
	}
//return the function put as __init__ method for objects so that it can call all the previously declared functions
	return function() {
		var data = {
			that: this,//trick to be able to acces the this object inside functions
			key: {},
			storage: {}//the storage for all variables
		};
		//getters and setters to be used from outside
		this.get = function(property, key) {
			return get(data, property, key);
		};
		this.set = function(property, value, key) {
			return set(data, property, value, key);
		};
		this.call = function(method) {
			return call(data, method, Array.prototype.slice.call(arguments).splice(1));
		};
		//methods needing the key
		this.setProperty = function(p, key) {
			return setProperty(data, p, key);
		};
		this.setProperties = function(p, key) {
			return setProperties(data, p, key);
		};
		//return the key
		return data.key;
	};
}());





/***** namespace *****/
var XJSLib = (function() {
	//object
	var XJSLib = function XJSLib() {
		return XJSLib.get("oninvoke").apply(this, arguments);
	},
	key = XJSLib.__init__();
	//informations
	XJSLib.setProperties({
		"name": {
			value: "XJSLib",
			type: "protected"
		},
		"version": {
			value: 0.5,
			type: "protected"
		},
		"infos": {
			getter: function() {
				return XJSLib.get("name") + " v" + XJSLib.get("version");
			}
		},
		"oninvoke": {
			value: function() {
				return XJSLib.toString();
			},
			setter: function(fct) {
				if (isset(fct) && fct.varType.is("function")) {
					return fct;
				}
			},
			init: true
		},
		"addEvent": {
			setter: function(fct) {
				return fct || function(element, type, fct) {
					if (element.addEventListener && false) {
						element.addEventListener(type, fct, false);
					} else if (element.attachEvent &&  false) {
						element.attachEvent("on" + type, fct);
					} else {
						element["on" + type] = element["on" + type] ?
							(function(old) {
								return function() {
									old();
									fct();
								};
							}(element["on" + type]))
						: fct;
					}
				};
			},
			init: true
		},
		"include": {
			value: function(src) {
				document.write('<script src="' + encodeURIComponent(src) + '"><\/script>');
				return XJSLib;
			},
			type: "protected"
		},
		"throwError": {
			value: function(message) {
				throw new Error(message);
			},
			setter: function(fct) {
				if (!isset(fct) || !fct.varType.is("function")) {
					XJSLib.call("throwError", "Wrong argument for setting throwError");
				} else {
					return fct;
				}
			}
		}
	}, key);
	//plugins loader
	/* readyStates :
	**	1: included
	**	2: loaded
	**	
	**	
	*/
	var scripts = {};
	function getScript(name) {
		if (!isset(scripts[name])) {
			scripts[name] = {
				readyState: 0
			};
		}
		return scripts[name];
	}
	//pour l'instant, c'est séparé pour y voir plus clair mais à terme, ça sera avec l'autre setProperties
	XJSLib.setProperties({
		"load": {
			value: function(scriptName) {
				var script = getScript(scriptName);
				if (script.readyState < 1) {
					script.readyState = 1;
					XJSLib.call('include', scriptName);
					return true;
				} else {
					return false;
				}
			},
			type: "protected"
		},
		"loaded": {
			value: function(scriptName, fct, dependancies, wait) {//Les deux paramètres serviront plus tard. Le premier pour les dépendances. Le deuxième pour savoir s'il faut attendre les dépendances ou pas. C'est à dire si le code est fait de fonctions qui auront besoin des dépendances à leur exécution ou d'un code qui en a besoin tout de suite.
				var script = getScript(scriptName);
				if (script.readyState < 2) {
					script.readyState = 2;
					fct();
					return true;
				} else {
					return false;
				}
			},
			type: "protected"
		}
	}, key);
	
	
	
	XJSLib.call("addEvent", window, "load", function() {
		XJSLib.set("include", function(src) {
			var script = document.createElement("script");
			script.src = encodeURIComponent(src);
			document.body.appendChild(script);
			return XJSLib;
		}, key);
	});
	//toString and valueOf
	XJSLib.toString = XJSLib.valueOf = function() {
		return XJSLib.get("infos");
	};
	//we return the object
	return XJSLib;
}());

Ce code n'est pas utilisable tel quel... Ou du moins que vous le déconseille...
Par contre tu peux t'en inspirer

Et au passage une autre bonne idée que je compte abouter à cette lib (quand je la recoderai), c'est une initialisation automatique :

Object.prototype.get = function ( name ) {
    this.__init__( );
    return this.get( name );
};
Object.prototype.set = function ( name, value ) {
    this.__init__( );
    return this.set( name, value );
};

lifaon74

4 novembre 2010 à 21:19:01

Bonjour, je me suis posé une question l'autre jour, et je me suis demandé s'il était possible de lancer automatiquement une méthode d'un objet js lors d'un évènement?

par exemple:

je créer l'objet variable
et je voudrait pouvoir faire un truc du genre:

variable.onchange=function(){}

ou se serait moi qui définisse les modalité du lancement de onchange

est-ce possible et si oui comment faire?

merci de votre réponse

lieo

4 novembre 2010 à 21:27:23

Il me semble qu'il faut "attacher" l'évènement, et ainsi il deviendra dynamique, voilà par exemple une petite fonction pour Ie et les autres pour attacher les objets (perfectible, mais sa montre le principe) :

function addEvent(el,ev,fct,arg){
	var source = document.getElementById(el);
	
	if(source.addEventListener){// ff
	   source.addEventListener (ev, function(){fct(arg);}, true);
	}
	else{// ie
	   source.attachEvent("on"+ev, function(){fct(arg);});
	}
}

addEvent("monObjet", "change", maFonction, "argument");

var maFonction = function(){}

Edit: ... si je me trompe pas je fais un gros Hors sujet ? >_<

(J'ai tendance à comprendre de travers, l'horreur, bon bah désolé d'avoir fais une réponse inutile :'(

4 novembre 2010 à 21:36:09

oui mais la ce sont des évènements déjà implantés par js, pour des objets HTML!
moi, je parle d'attribuer un évènement quelconque (genre variable.changeofvalue) a n'importe quel objet, et ou l'on puisse déterminer ce qui vas conduire a l'appel de la fonction qui est liée a l'évènement changeofvalue (genre variable.changeofvalue=function(){alert('ok');})

4 novembre 2010 à 21:41:47

Pour ça que j'ai édité, je me suis rendu compte qu'après...
Sinon il existe la méthode simple consistant à placer une condition dans le onchange. Si tu veux que ce soit une autre liste qui le déclenche, tu place le onchange dessus, tu vérifie s'il change vers ce que tu attends et voilà ?
(Ou tu cherche une méthode "courte" et "magique" ?)

4 novembre 2010 à 21:45:26

non non , je cherche a attribuer un évènement non définie a un objet js (n'importe lequel)

xavierm02

4 novembre 2010 à 22:48:34

Golmote

5 novembre 2010 à 1:12:00

Comme ça ?

<div id="plop">Contenu 1</div>
<button id="but">Déclencher l'événement</button>

<script type="text/javascript">
window.onload=function() {
  var plop = document.getElementById('plop'),
  but = document.getElementById('but'),
  cpt = 1;
  plop.addEventListener('incrementation',function(e) {
    this.innerHTML = "Contenu "+(++cpt);
  },false);
  but.onclick = function(e) {
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('incrementation',true,true);
    plop.dispatchEvent(evt);
  };
};
</script>

Les événements personnalisés ne sont, je crois, pas disponibles sous IE... Est-ce important ?

5 novembre 2010 à 12:15:39

Il veut pour les objets JS en général... pas uniquement pour ceux du DOM.
Et il va pas instancier des trucs du DOM juste pour ça...

5 novembre 2010 à 12:25:29

Arf.

Bon bah alors, ouais, ça se fait plus "à la main" :-°

5 novembre 2010 à 12:30:54

Et arrête d'inciter à dire fuck à IE >_<

A la limite, on peut faire ce choix quand on sait de quoi il retourne... mais pas quand on commence...

5 novembre 2010 à 12:46:48

Bah lifaon ça fait un bail qu'il commence :-°

5 novembre 2010 à 13:43:31

grâce a tous vos précieux conseils, j'ai élaborer ma propre fonction :

<script type="text/javascript">
function launchevent(obj,a){
obj[a]();
}

variable=function(value,fonction){
this.value=value;
this.onchange=fonction;
this.setvalue=function(a)
{
this.value=a;
this.length=(a + "").length;
launchevent(this,'onchange');
}
this.length=(value + "").length;
}

var var1=new variable('value 1');

var1.onchange=function(){
alert('la valeur a changé en : '+var1.value);
}
</script>
<button onclick="var1.setvalue('nouvelle valeur');">change value</button>

5 novembre 2010 à 14:02:11

Vérifie le type de obj[a] avant de l'exécuter

attribuer un evenement dynamique a un objet

attribuer un evenement dynamique a un objet

Supprimer

Modérer

Signaler le message aux modérateurs