Question

Which pattern is best, and why?

$myElements.delegate(selector, 'event1 event2', function () {
   if (event.type === 'event1') { /* Handle event 1 */ }
   if (event.type === 'event2') { /* Handle event 2 */ }
}

OR

$myElements
   .delegate(selector, 'event1', function () {
       /* Handle event 1 */
}
   .delegate(selector, 'event2', function () {
       /* Handle event 2 */
}

In other words, is it better to have one large unified handler, or many small separate handlers?

Answer 1

I am fairly sure that the second solution is to be preferred. From the jQuery source:

// Handle multiple events separated by a space
// jQuery(...).bind("mouseover mouseout", fn);
types = types.split(" ");

So there is the step of splitting a string and then running through a while loop for each event. In the first case the handler is called for every event and then your if statement is executed. In the second only the handler actually attached is being called.

Besides, the second version is a lot easier to read as well.