What is the order of events binded by Views in Backbone.js?

Question

var ViewA = Backbone.View.extend({
        events: { 'click a': 'do_something' },
        do_something: function() { console.log('ViewA::do_something()'); }
});

var ViewB = Backbone.View.extend({
        events: { 'click a.some_class': 'do_something' },
        do_something: function() { console.log('ViewB::do_something()'); }
});

////////

<a class="some_class">Click me</a>

I've got 2 views setup that binds to click events as shown above. For some reason, ViewA's handler always gets called first.

I've tried:

• Changing the order that the JS is loaded.
• Changing the order that the views are initialized.

This leads me to believe that is is down to the specificity of the selectors, but that doesn't make sense either given that the selector in ViewB is more specific than the one in ViewA - why would the more general selector get called first?

Answer 1

OK I figured this out - for anyone that runs into this in the future. The ordering of the events are determined by (in order of importance):

1. The specificity of the "el" element of the view
2. The specificity of the event selector
3. The order the views are initialized