I have created a JavaScript Object and named it 'Button'. this object has a function that draw a button and append it to specific div element.

  var Button = function (id, value) {
        this.id = id;
        this.value = value;           

        this.draw = function () {
            var element = document.createElement("input");
            element.type = "button";
            element.id = id;
            element.value = value;               
            document.getElementById("topDiv").appendChild(element);
        }
    };

I instantiate Button object and call draw() function like this:

 var myButton = new Button('btn1', "Test Button");
 myButton.draw();

My problem is I cant handle events. I want to connect onclick event to a function. for example:

myButton.onClick = function(){ alert(1); };

but I don't know how to define this.

I have created a JavaScript Object and named it 'Button'. this object has a function that draw a button and append it to specific div element.

  var Button = function (id, value) {
        this.id = id;
        this.value = value;           

        this.draw = function () {
            var element = document.createElement("input");
            element.type = "button";
            element.id = id;
            element.value = value;               
            document.getElementById("topDiv").appendChild(element);
        }
    };

I instantiate Button object and call draw() function like this:

 var myButton = new Button('btn1', "Test Button");
 myButton.draw();

My problem is I cant handle events. I want to connect onclick event to a function. for example:

myButton.onClick = function(){ alert(1); };

but I don't know how to define this.

• javascript
• html

• 1 You are “attaching” an event on the JavaScript object here – you want to attach it to the DOM element instead (element in your draw method). So you either have to provide outside access to that element (make it a public property f.e.) – or, if you need the same event handling for all those buttons, just attach the handler inside your Button function already, when creating the element. – C3roe Commented May 28, 2013 at 11:01
• I dont want onclick event create by default. I want it to create when I want to. And i do have access to my element in my object constructor. I have it's name. var element= document.getElementById(id); element.onclick = function () { alert('blah blah'); }; this works. by I want to pass the a function and when I push the button, my specific function calls. – Azadeh Radkianpour Commented May 28, 2013 at 11:09
• @Azade: Yes, it would be just document.getElementById(myButton.id).onclick = … then. – Bergi Commented May 28, 2013 at 11:19

5 Answers 5

Try

var Button = function (id, value) {
    this.id = id;
    this.value = value;           

    this.draw = function () {
        this.element = document.createElement("input");
        this.element.type = "button";
        this.element.id = id;
        this.element.value = value;               
        document.getElementById("topDiv").appendChild(this.element);
    }
};

Button.prototype.addEventListener = function(event, handler){
    var el = this.element;
    if(!el){
        throw 'Not yet rendered';
    }
    if (el.addEventListener){
        el.addEventListener(event, handler, false); 
    } else if (el.attachEvent){
        el.attachEvent('on' + event, handler);
    }
}

Demo: Fiddle

I know it's an old question but it's worth mentioning that you could have done it after appending to div:

document.getElementById("topDiv").appendChild(element);
this.element.onclick = function(){ alert(1);};

this is more consistent and much less coding. jsfiddle

You would have to create your own click() method (which takes a function as a parameter) that binds to the DOM element's click handler. Your draw() method can store a reference to the element in the object instance so that your click() method can access it.

As it was already mentioned, you should attach events to DOM objects.

The simple way is just to expose your DOM element from your custom class:

var Button = function (id, value) {
    this.id = id;
    this.value = value;

    var element = document.createElement("input");
    this.element = element;           

    this.draw = function () {
        element.type = "button";
        element.id = id;
        element.value = value;               
        document.getElementById("topDiv").appendChild(element);
    }
};

Now you can:

 var myButton = new Button('btn1', "Test Button");
 myButton.draw();
 myButton.element.onclick = function(){ alert(1); };

If Native Javascript....

document.getElementById("btn1").onclick

If jQuery

$('#btn1').click(//function(){})....

If jQuery but Button is Created dynamically.... You might try..

$('#btn1').live('click',//function(){ })....

EDIT: As Suggested in the Comment: Please read what the Documentation says:

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+

ADDITIONAL If You can't live without -live-...

As of jQuery 1.4 the .live() method supports custom events as well as all JavaScript events that bubble. It also supports certain events that don't bubble, including change, submit, focus and blur.