Object-Oriented Javascript custom addEvent method

Question

I have a question regarding developing object-orientated javascript and parsing variables. Please see this blog by net.tutsplus - The Basics of Object-Oriented JavaScript for more info.

I have the following code which creates an event:

$(document).ready(function() {
    tools.addEvent('.someButton', 'click', user.getUserDetails);
)};

var tools = {
    addEvent: function(to, type, fn) {
        $(to).live(type, fn);
    }
}

var user = {
    getUserDetails: function(userID) {
        console.log(userID);
    }
}

As you can see, it calls the addEvent method with three variables; the DOM element to attach the event to, the type of the event and the function to run when the event is triggered.

The issue I am having is parsing a variable to the getUserDetails method and I know of 2 options:

I could obviously have 1 line of code at the start which could check an attribute of the sender. For example, the .someButton could have an attribute userID="12345". However, this is not ideal because the function is run from several different places - meaning this check is not always available (and the code is harder to manage).
A better option could be to have another method like user.willGetUserDetails and use this method to get the attribute userID from the DOM. This could be run from anywhere on the page, and would call getUserDetails after getting the userID. Whenever the user details comes from within another function, we would simply call getUserDetails directly.
What would be ideal, is if I could amend the code above to pass a variable directly - even an undefined one. Does anyone know how this could be achieved?

If you want to "parse" a variable, just use JSON.stringify(variable);. Also, do not use .live() since it was removed from jQuery since 1.9 — Brad M
– Brad M, Commented Mar 21, 2013 at 16:01

user400654 · Accepted Answer · 2013-03-21 16:02:07Z

4

Add one more argument to your addEvent code that accepts data to pass to the event.

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(to).live(type, data, fn);
    }
}

Also, i'd suggest using delegate instead, or .on in 1.7+

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(document).delegate(to, type, data, fn);
    }
}

or

var tools = {
    addEvent: function(to, type, data, fn) {
        if ($.isFunction(data)) {
            fn = data;
            data = {};
        }
        $(document).on(type, to, data, fn);
    }
}

Now you can use it like this:

$(document).ready(function() {
    tools.addEvent('.someButton', 'click', {userID: theuserid}, user.getUserDetails);
)};

var user = {
    getUserDetails: function(event) {
        console.log(event.data.userID);
    }
}

answered Mar 21, 2013 at 16:02

user400654

95.1k16 gold badges168 silver badges188 bronze badges

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

3 Comments

Patrick Over a year ago

Wow! Fantastic answer and so fast too. Needless to say, it works as I hoped. Thanks

Nope Over a year ago

+1 for adding delegate example for pre 1.7 as it still is heavily used and is very useful information for future users.

user400654 Over a year ago

@Patrick It would also be a good idea to add one more argument that you can use as a context instead of document if you aren't using the .live version.

Collectives™ on Stack Overflow

Object-Oriented Javascript custom addEvent method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related