CODEWITHSUNDEEP
javascripthtml
Azadeh Radkianpour
Azadeh Radkianpour

Reputation: 971

Create javascript object with event handler

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.

Upvotes: 3

Views: 9508

Answers (5)

Daniel B
Daniel B

Reputation: 3185

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

Upvotes: 1

ErickBest
ErickBest

Reputation: 4692

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.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 2

claustrofob
claustrofob

Reputation: 4984

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); };

Upvotes: 0

andy magoon
andy magoon

Reputation: 2929

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.

Upvotes: 0

Related Questions