Question

Below is relevant code from Backbone.js

Are Backbone Events related to jQuery events in any way? Or are you suppose to choose.

For example for jQuery click you use:

$("#target").click(function() {
  alert("Handler for .click() called.");
})

For backbone they have this

var object = {};

_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Backbone Model w/ Event Trigger

var Sidebar = Backbone.Model.extend({
  promptColor: function() {
    var cssColor = prompt("Please enter a CSS color:");
    this.set({color: cssColor});
  }
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
  $('#sidebar').css({background: color});
});

sidebar.set({color: 'white'});

sidebar.promptColor();

Backbone Related Event Code

var Events = Backbone.Events = {
    on: function(events, callback, context) {
        var calls, event, node, tail, list;
        if (!callback) {
            return this;
            events = events.split(eventSplitter);
            calls = this._callbacks || (this._callbacks = {});
        while (event = events.shift()) {
            list = calls[event];
            node = list ? list.tail : {};
            node.next = tail = {};
            node.context = context;
            node.callback = callback;
            calls[event] = {tail: tail, next: list ? list.next : node};
        }
        return this;
    },
    off: function(events, callback, context) {
        var event, calls, node, tail, cb, ctx;
        if (!(calls = this._callbacks)) return;
        if (!(events || callback || context)) {
            delete this._callbacks;
            return this;
        }
        events = events ? events.split(eventSplitter) : _.keys(calls);
        while (event = events.shift()) {
            node = calls[event];
            delete calls[event];
            if (!node || !(callback || context)) continue;
            tail = node.tail;
            while ((node = node.next) !== tail) {
                cb = node.callback;
                ctx = node.context;
                if ((callback && cb !== callback) || (context && ctx !== context)) {
                    this.on(event, cb, ctx);
                }
            }
        }
        return this;
    },
    trigger: function(events) {
        var event, node, calls, tail, args, all, rest;
        if (!(calls = this._callbacks)) return this;
        all = calls.all;
        events = events.split(eventSplitter);
        rest = slice.call(arguments, 1);
        while (event = events.shift()) {
            if (node = calls[event]) {
                tail = node.tail;
                while ((node = node.next) !== tail) {
                    node.callback.apply(node.context || this, rest);
                }
            }
            if (node = all) {
                tail = node.tail;
                args = [event].concat(rest);
                while ((node = node.next) !== tail) {
                    node.callback.apply(node.context || this, args);
                }
            }
        }
        return this;
    }
};

Answer 1

From the docs, Backbone:

Uses jQuery’s delegate function to provide declarative callbacks for DOM events within a view.

The salient snippet of code is this:

if (selector === '') {
  this.$el.bind(eventName, method);
} else {
  this.$el.delegate(selector, eventName, method);
}

…which asks jQuery (or zepto, or whatever else is providing the $ operator) to handle event delegation.

So if the events in question are bound using a view’s delegateEvents method, the binding has happened through jQuery.

The Backbone.Events module itself, however, is intended for use with standalone Objects (not DOM Elements) and defined independently in the Backbone source.