Create javascript object with event handler

Question

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.

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
– 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
– Azadeh Radkianpour, Commented May 28, 2013 at 11:09
@Azade: Yes, it would be just document.getElementById(myButton.id).onclick = … then. — Bergi
– Bergi, Commented May 28, 2013 at 11:19

Arun P Johny · Accepted Answer · 2013-05-28 12:03:55Z

2

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

answered May 28, 2013 at 12:03

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Azadeh Radkianpour Over a year ago

I don't want to send my handler as a parameter. I want it to be assigned. like myButton.click = function(){...}; by the way it was useful.

Daniel B · Accepted Answer · 2018-01-18 17:18:37Z

1

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

answered Jan 18, 2018 at 17:18

Daniel B

3,2152 gold badges38 silver badges48 bronze badges

Comments

andy magoon · Accepted Answer · 2013-05-28 11:55:09Z

0

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.

answered May 28, 2013 at 11:55

andy magoon

2,9192 gold badges21 silver badges14 bronze badges

Comments

claustrofob · Accepted Answer · 2013-05-28 11:57:01Z

0

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

answered May 28, 2013 at 11:57

claustrofob

5,0042 gold badges21 silver badges24 bronze badges

Comments

ErickBest · Accepted Answer · 2013-05-28 13:45:31Z

0

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.

edited May 28, 2013 at 13:45

answered May 28, 2013 at 12:02

ErickBest

4,7205 gold badges33 silver badges45 bronze badges

3 Comments

Eric Turner Over a year ago

Avoid live. It's deprecated and performs poorly.

Azadeh Radkianpour Over a year ago

I'm trying to create a JavaScript library. I don't want to use document.getElementById... or any of this.

ErickBest Over a year ago

@ertrne it's Good when You say Avoid -SODA-... drink -WATER- instead.. Yah, he is gonna avoid 'live' as the SODA.... What's the WATER to drink instead??. 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. "--- IF He is still using jQ < 17....there is NO HARM..

Collectives™ on Stack Overflow

Create javascript object with event handler

5 Answers 5

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related