I solved it by using Object.defineProperty prototype method. Below is a code snipped of a working button object. Thanks for all your help guys :)
function Button() {
this.Node;
this.Target;
this._CssClass;
this._ID = "";
this._OnClick = "";
this._Text = "";
this._data = "";
this._IsEnable =true;//Can be set to false
this._Visible = true;//Can be set to false
this._ToolTip = "";
this.NodeCreate = function () {
Debug.WriteLine("node created");
var btn = document.createElement("div");
this.Node = btn;
}
this.NodeCreate();
}
Object.defineProperty(Button.prototype,"CssClass",{//Sets and gets the css class
get: function () {
return this._CssClass;
},
set:function(args){
Debug.WriteLine("set");
this._CssClass = args;
this.Node.className = args;
}
});
Object.defineProperty(Button.prototype, "ToolTip", {//Sets and gets the ToolTip
get: function () {
return this._ToolTip;
},
set: function (args) {
this._ToolTip = args;
this.Node.title = args;
}
});
Object.defineProperty(Button.prototype, "ID", {//Sets the css ID
get: function () {
return this._ID;
},
set: function (args) {
this._ID = args;
this.Node.id = args;
}
});
//Mouse and Touch Event Handlers
Object.defineProperty(Button.prototype, "OnClick", {//Sets the onclick behavior
set: function (args) {
this.Node.onclick = args;
}
});
Object.defineProperty(Button.prototype, "OnMouseUp", {//Sets the mousedown behavior
set: function (func) {
this.Node.onmouseup =func;
}
});
Object.defineProperty(Button.prototype, "OnMouseDown", {//Sets the mousedown behavior
set: function (func) {
this.Node.onmousedown = func;
}
});
Object.defineProperty(Button.prototype, "OnMouseEnter", {//Sets the mousedown behavior
set: function (func) {
this.Node.onmouseover = func;
}
});
Object.defineProperty(Button.prototype, "OnMouseLeave", {//Sets the mousedown behavior
set: function (func) {
this.Node.onmouseout = func;
}
});
Object.defineProperty(Button.prototype, "OnMouseWheel", {//Sets the mousedown behavior !Currently broken!
set: function (func) {
this.Node.addEventListener("mousewheel", func, false);//IE9, Chrome, Safari, Opera
this.Node.addEventListener("DOMMouseScroll", func, false);//Firefox
}
});
var x = new Button();
document.body.appendChild(x.Node);
x.CssClass = "productBtn";
x.ToolTip = "I am a tooltip";
x.ID = "Product ID";
Debug.WriteLine("x.cssClass: " + x.CssClass);
x.OnMouseUp =new System.EventHandler(clickTest);
x.OnMouseEnter = new System.EventHandler(clickTest);