Take the 2-minute tour ×

Suppose I have an object, with some properties and methods:

var Form = {
    name: 'sign-up',

    show: function() {...},
    hide: function() {...},
    validate: function() {...},
    updateCurrency: function() {...},
    handleCheckBox: function() {...}

Now I want to call different methods when certain events happen in my form like so:

$('#country-select').bind('change', function() {

$("input[type='checkbox']").bind('change', function() {

I have a lot of these event listeners, and frankly, I find them ugly listed out one by one like that and not tied directly to the object they relate to. Is there a more elegant way of encapsulating them within my object literal Form? Is there a best practice?

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

I like @gillesc answer, it's on the right tracks. However, I think we can do better.

The main issue with @gillesc answer is that its missing the dynamic aspect of things (event handlers for instance), also it forces your to define ugly callback functions.

So heres how I think you should solve your problem.

// Test object
var testObj = {
    // Our event handlers. 
    // Notice how we must only define the callback function name here. 
    // Not the function itself. The callback function must be defined in testObj.
    handlers: {
        '#form submit': 'onSubmit'
    // Method that will register all handlers to some selector
    registerHandlers: function() {
        var that = this;
        // Go through the handlers list.
        $.each(this.handlers, function(k, v) {
            // Parsing the event to two different parts. 
            // 1. trigger event
            // 2. selector
            var split = k.split(" "),
                el = split[0],
                trigger = split[1];

            // Delegating the trigger to selector
            $(document).delegate(el, trigger, that[v]);
    // Our actual callback function
    onSubmit: function(evt) {

How would it all work? Thats easy! We just need to call testObj.registerHandlers().

JSFiddle demo

share|improve this answer
Also whats good about this approach is that you are not forced to have registerHandlers method in your object. Did a really quick/dirty example of what i mean. JSFiddle demo here –  Kirstein Apr 26 '12 at 7:54
add comment

Organise your markup better and add classes to element that matches event handler methods so that you can easily create a list of handler and iterate over them to bind them to the targeted elements.

Var Form = {
    handlers: {
        country: function() {},
        checkbox: function() {}

$.each(FORMS.handlers, function(k, v) {
    $('.' + k).on('change', v);

<select class="country">....</select>
<input class="checkbox" type="checkbox" />

Then all you have to do is add classes and handlers to extend

share|improve this answer
This is perfect for generic handlers (attaching events via class names). –  Lee Kowalkowski Apr 25 '12 at 13:23
add comment

Well, you don't need to wrap your functions within more functions for a start. Can't you just:

$('#country-select').bind('change', Form.updateCurrency);
$("input[type='checkbox']").bind('change', Form.handleCheckBox);
share|improve this answer
Yeaaah.. but that ignores other things I am likely doing within the callback such as preventDefault(). It also doesn't help me encapsulate my event handlers within the object like I want to do.. –  alnafie Apr 25 '12 at 11:39
In which case you can wrap the bind method (and your bind method wraps your event handler), otherwise (in your example in your question), you're losing reference to the event, so how can handleCheckBox handle your check box? –  Lee Kowalkowski Apr 25 '12 at 13:15
add comment

Your Answer


