What are Backbone.js Events ?

Last Updated : 23 Aug, 2022

Events in backbone.js play a very important role, technically it is a module that can be integrated into an object which gives object ability to bind and trigger accordingly to custom events. Generally, events are not declared before they are even bound they are simply passed arguments.

In simple words, backbone.js events are a special type of listeners that respond to any changes made.

Syntax (backbone events implementation by extending the class):

var object = {};
_.extend(object, Backbone.Events);
// Write your events here

Parameter description:

Object: It is an object created for class events we can give whatever object name we want to use.
Backbone.Events: It is a class in the backbone called events.

There are various methods associated with Backbone Events they are as follows:

on: This method is used to bind an event to an object, it executes the callback whenever an event is fired.
off: This method is used to remove all the events and callback functions from an object.
trigger: This method is used to invoke the callback functions for provided set of events.
once: This method is used to extend the Backbone.js model class while creating a backbone model.
listenTo: This method is used to make an object listen to another object’s event.
stopListening: This method is used to stop listening to the event of another object.
listenToOnce: This method is used to cause the listento method to occur only once before the callback function is removed.

Backbone.js in-built events:

“add” (model, collection, options): This event is used to add a model to the collection.
“remove” (model, collection, options): This event is used for the removal of a particular model from the collection.
“update” (collection, options): This event is used to the single event triggering when a particular number of models are removed/added/changed from a collection.
“reset” (collection, options): This event is used to reset the total contents of a collection.
“sort” (collection, options): This event is used to re-sort the collection.
“change” (model, options): when we want to change the attributes of a model this event is used.
“changeId” (model, previousId, options): when we want to update the id of a particular model, we use this method.
“change:[attribute]” (model, value, options): when there is a change detected in the attribute this event is automatically triggered.
“destroy” (model, collection, options): when we want to destroy a model from a collection this method is used.
“request” (model_or_collection, xhr, options): For processing the request of the server from the collection, model this event is used.
“sync” (model_or_collection, response, options): For syncing the model and collection with the server this event is used.
“error” (model_or_collection, xhr, options): This event is invoked when there is a failure to server request created by the model or collection.
“invalid” (model, error, options): Whenever the validation fails for the model on the client side this event is invoked.
“route:[name]” (params): When a specific route is found by the router this event is fired.
“route” (route, params): When a route is matched by a router this event is fired.
“route” (router, route, params): When a route is matched this event is automatically triggered or fired by history.
“all”: This method fires for every event that is triggered by passing argument as the event name.

Example 1: In this example, we are using on event.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Backbone.js event example</title> 
    <script src= 
"https://code.jquery.com/jquery-2.1.3.min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
            type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
            type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <h3>Backbone.js On event</h3> 
    <script type="text/javascript"> 
        var value = _.extend({ 
            name: 'GeeksforGeeks' 
        }, Backbone.Events); 
        value.on('first', function () { 
            document.write( 
                "Trigger-1) The triggered value is: "); 
            document.write(this.name); 
        }); 
        value.on('second', function () { 
            document.write("<br>"); 
            document.write( 
                "Trigger-2) The triggered value is: "); 
            document.write(this.name); 
        }); 
        value.trigger('first'); 
        value.trigger('second'); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we are using once event.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <title>Backbone.js event example</title> 
    <script src="https://code.jquery.com/jquery-2.1.3.min.js" 
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js" 
        type="text/javascript"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js" 
        type="text/javascript"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Backbone.js example using Once event</h3> 
      
    <script type="text/javascript"> 
        var obj = {}; 
        _.extend(obj, Backbone.Events); 
        obj.once('trigger', function () { 
            document.write( 
                `<h2 style="color:blue;"> 
                    OUTPUT AFTER TRIGGERING ONCE EVENT: 
                </h2>`); 
            alert("triggered"); 
        }); 
        obj.trigger('trigger'); 
        obj.trigger('trigger'); 
    </script> 
</body> 
  
</html>