Understanding BackboneJS View Event, jQuery Event and trigger()

The fun in working with BackboneJS is freedom. The library is so decoupled that, one can really do any kind of architecture for an application. This freedom will come in your way if you do not know what is happening behind. We will be focusing on ‘Event’ here.
Working with BackboneJS often involves working with jQuery too as a DOM manupilation library. When we work on HTML and DOM, in terms of BackboneJS we are working on View. At this point we must understand, that this BackboneView can dispatch event and the DOM we are dealing with also is capable of dispatching event. The point to note here is event dispatched through BackboneJS framework, does not bubble. Where as the default DOM events bubble. Well, since we generally work with jQuery for DOM manupilation, events fired through jQuery also has the same effect as DOM events, they bubble. Working with a BackboneJS ViewObject, we deal with el of the ViewObject. BackboneJS also provides a $el on each view. Take a note of this $el, which is a jQuery object.
Dispatching an Event in BackboneJS is done as

//somewhere inside the View
this.trigger('myEvent',{'data':'myValue'});

The basic syntax for dispatching an event in BackboneJS is

object.trigger(event, [*args])

Remember that the second parameter in the trigger is data to be passed to the event-handler. Registering the listener for the event will be as

this.listenTo(this.viewObject, 'myEvent', this.onMyEvent);

Now writing a handler for this event will look as

//handler
onMyEvent: function(eventdata){
    console.log(eventdata);//example: getting data from the event
}

So, we get the whole data ( passed to the trigger() method as second parameter ) , as the arguement to the handler.

Now lets focus on the DOM event for the same scenario. The dispatcher code will look as

this.$el.trigger('myEvent',{'data':'myValue'});

Here, actually it seems that we are using BackboneJS Event, but since we are dealing with $el, we are actually triggering a DOM event through jQuery. Since this is a DOM event, it has all the three phases in its life cycle; capture, target and bubble. So, we can really catch this event on a parent view of BackboneJS and the code would be like

events: {
    'myEvent': 'onMyEvent' //this is actually listening to DOM event
}

The handler code will look as

onMyEvent : function(event,data){
    event.preventDefault();
    //code as required by application
    //But, see the second arguement is actually 'data', passed to 'trigger()'
    return false;
}

Note the difference in event handler here. We have now two arguements and the second arguement is the data that is passed in to trigger() call above. All that is to it is, how you trigger the event, from the two ways below.

From the [BackboneJS] View
From the DOM element

And then, writing a proper event-handler for the respective Event.

In BackboneJS, sometimes you need to deal with situations, where you just want to listen for events without knowing the other Views. That way de-coupling the application. There is Mediator design pattern to do a central event dispatching system for the whole BackboneJS application. Then there is this little but powerful thing, called bubbling, already available to native DOM.

Here are the links to the two trigger methods;

Happy Bubbling.