delegateEvents in backbone.js

Question

Can anyone please explain me what delegateEvents in backbone.js does? The documentation did not help me to understand.

My exact use case is:

I have a main view X

Answer 1

delegateEvents takes the events: { ... } declaration for your view instance, and binds the specified events to the specified DOM elements, with the specified callback methods to handle the events.

So, a DOM tree that looks like this after being rendered:

 
  foo

And a view defined like this:

Backbone.View.extend({
  events: {
    "click .foo": "fooClicked"
  },

  fooClicked: function(e){
    // handle the click, here
  },

  render: function(){
    // render the specified HTML, here
  }
});

will properly handle clicking the "foo" link, so that you can respond to the click in your code.

The breakdown of the events declaration is: "eventname selector": "callback" where "eventname" is any DOM event, such as "click". "selector" is any valid jQuery selector, which is run against your view's el for the DOM element to bind the event to. "callback" is the name of the method on this view to call, when the event for that DOM element fires.

hope that helps