Events in Backbone

There are two types of events that you can listen to in Backbone: regular DOM events, and Backbone events that are triggered by Backbone models. You should always use an events property to listen for the former, and Backbone's listenTo method for the latter.

Regular DOM events can be listened for using jQuery's on method, but you shouldn't use this in Backbone. Instead, you should use Backbone's events hash, with the following syntax:

events: {
  "event selector": "callback"
}

This will listen for the event on the selector, and when it happens, it will call the given callback function (which should be specified as another property in the current class). This syntax is concise and automatically binds the context to this for you. More importantly, Backbone will automatically get rid of these event listeners if you call the remove() method on the instance of the class. Without removing the event listeners, the object will remain in memory even though there are no more references to it, and this is bad for performance.

Backbone events can be listened for using the listenTo method, which has the following syntax:

initialize: function () {
  this.listenTo(this.model, "sync", this.render)
}

In the above example, the current class will listen to a "sync" event triggered by its own model. When this happens, the current class will call its render method. The listenTo method comes with all the same benefits as using the events hash - it automatically binds this for you, and it gets rid of the event listeners when you remove the instance of the class that is listening.