One element, multiple events

[Rain_Lover]

In jQuery you can easily do it like this:

$("#foo").focus(function () {
  // Do this.
}).blur(function () {
  // Do that.
});

Can we do something similar in JavaScript so we don't have to repeat #foo in two separate functions?

[Fotiman]

That's called "method chaining". Basically, if you define your JavaScript class so that the methods return this then you should be able to do chaining. For example:

function foo () {
 this.history = [];
}
foo.prototype.method1 = function () {
 this.history.push('method1');
 return this;
}
foo.prototype.method2 = function () {
 this.history.push('method2');
 return this;
}
foo.prototype.logHistory = function () {
 console.log(this.history);
 return this;
}
var bar = new foo().method1().method2().logHistory().method2().logHistory();

[Rain_Lover]

That's called "method chaining".

It's new to me.

Thanks for the sample code, but it seems that using two separate functions for #foo is easier than "method chaining".

[Fotiman]

It's really not very complicated. It's just a matter of returning the same object that you're working on. If your code is not object oriented, then method chaining wouldn't make sense. But if you have 2 methods of the same object, chaining is easy.