Question

I generally write code that looks like this (but with many more handlers).

$(document).ready(function() {

    $("#next").click(function() {
        doStuff();
    });

    $("#prev").click(function() {
        doSomeOtherStuff();
    });

    $("#link").hover(function() {
        doSomeTotallyOtherStuff();
    });
});

Is this the best way of doing this? Should I do it differently? Paul Irish’s presentation suggests it’s a bad idea. Is that true?

Answer 1

We like to use the object literal pattern and named functions. I’d rewrite your example like this:

$(function() {
  Example.somegrouping.init();
});

var Example.somegrouping = {
  init: function() {
    // set up listeners
    $("#next").click(this.onNextClick);
    $("#prev").click(this.onPrevClick);
    $("#link").hover(this.onLinkHover);
  },
  onNextClick: function() {
    // do some stuff
  },
  onPrevClick: function() {
    // do some stuff
  },
  onLinkHover: function() {
    // do some stuff
  }    
};

Why? Well, it makes it easier to reuse event handlers in other places without resorting to triggers. The naming of the function can help self-document your code. Testing/debugging is easier. The object literal only adds one entry to the global namespace, so there is little chance for collisions with other scripts your page might be using.