CODEWITHSUNDEEP
javascriptbackbone.jsevent-handling
pratap
pratap

Reputation: 117

Backbone events - disable Capture phase

Backbone events model seems to be available for both Capture as well as the Bubble phase. I want to disable the triggering of events during capture phase and only be able to trigger/handle an event during the bubble phase.

Any pointer would be of great help

Upvotes: 0

Views: 751

Answers (2)

u.k
u.k

Reputation: 3091

This should work:

Backbone.View.extend({
  events: {
    'click table tr > td > a': function (e) {
       e.preventDefault();
       e.stopPropagation();
      /// do stuff
     }
  }
}):

Upvotes: 1

seebiscuit
seebiscuit

Reputation: 5053

Backbone does not impose an event detection mechanism on events.

Backbone .on()

In fact, other than Backbone events which must be triggered manually, and are not attached to the DOM (doing something like myView.on('event-name', someCallback, view), and triggering with myView.trigger('eventName')), all the view DOM Events, which are defined by the events hash, are delegate to jQuery.

Backbone.events

Take a look at the Backbone method that binds the events in the events hash, delegateEvents:

delegateEvents: function(events) {
  if (!(events || (events = _.result(this, 'events')))) return this;
  this.undelegateEvents();
  for (var key in events) {
    var method = events[key];
    if (!_.isFunction(method)) method = this[events[key]];
    if (!method) continue;

    var match = key.match(delegateEventSplitter);
    var eventName = match[1], selector = match[2];
    method = _.bind(method, this);
    eventName += '.delegateEvents' + this.cid;

    /*** (Seebiscuit Comment  ***
     * This is where the event is 
     * actually bound.        ***/
    if (selector === '') {
      this.$el.on(eventName, method); /* (Seebiscuit) Notice the jQuery */
    } else {
      this.$el.on(eventName, selector, method);
    }
  }
  return this;
}

From the jQuery man page on the on function:

In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior. jQuery.on

If you read further down the docs you'll see that jQuery chose, as most browsers do, to bubble events.

Now not all events bubble. The short list (from Browser Events):

  • change/submit/reset: don't bubble in IE 6/7/8, but jQuery makes them bubble

  • focus/blur: jQuery's uses focusin/focusout hacks to bubble focus/blur events

  • load/error/resize/readystatechange/...: Methods on the window or on XHR objects not relevant to event delegation

But, since Backbone uses jQuery's event delegation, you're assured that even in the trickier cases you don't have to worry about event capturing propagation.

Upvotes: 0

Related Questions