Backbone.js stopListening Event

Last Updated : 14 Dec, 2022

Backbone.js stopListening Event is used to stop an object to listen to the event on the other object. The subsequent arguments will be passed to identify the object. Either stopListening will have no arguments to have the object remove all of the registered callbacks. Sometimes it takes an argument that specifies the events it’s listening to on a specific object. or a specific event or, just a specific callback.

Syntax:

object.stopListening( model, event, callback );

Parameters:

model: This parameter is the name of another model which to object in listening.
event: This parameter is the name of the event of the model to which our model is listening.
callback: This parameter is the name of the callback which is called when our event occurs.

Example 1: This example illustrates the BackboneJs stopListening. In this example, we will stop listening to a specific object.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title>BackboneJS listenTo Event Multiple times</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>BackboneJS listenTo Event Multiple times</h3>
   
  <script type="text/javascript">
 
 
    var first = _.extend({
      value: 'first object',
    }, Backbone.Events);
 
    var second = _.extend({
    value: 'second object', 
    }, Backbone.Events);
 
    let callback = function() {
      document.write(`</br>This is ` + this.value );
    };
 
      
    first.listenTo(first, 'event', callback);
    second.listenTo(second, 'this', callback);
 
    first.trigger('event');
    second.trigger('this');
   
    first.stopListening(second, 'this');
 
    first.trigger('event');
    second.trigger('this');
  
  </script>
</body>
   
</html>

Here on the above code first.stopListening( second, ‘this’ ) stop first object to listen second object’s ‘this’ event hence last second.trigger( ‘this’ ) have no action on page.

Output:

stopListening() with argument

Example 2: This example illustrates the BackboneJs stopListening. In this example, we will remove all the registered callbacks of an object. If we don’t pass any parameters then it removes all the registered callback of object from it.

HTML

<!DOCTYPE html>
<html>
 
<head>
  <title>BackboneJS listenTo Event Multiple times</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>BackboneJS listenTo Event Multiple times</h3>
   
  <script type="text/javascript">
 
 
    var temp = _.extend({
      value: 'Hello geeks for geeks temporary object',
    }, Backbone.Events);
 
    var temp2 = _.extend({
    value: 'temp2 object', 
    }, Backbone.Events);
 
    let callback = function() {
      document.write(`</br>This is ` + this.value );
    };
 
      
    temp.listenTo(temp, 'event', callback);
    temp.listenTo(temp2, 'event', callback);
    temp.listenTo(temp, 'this',  callback);
    temp.listenTo(temp2, 'this', callback);
 
    temp.trigger('event');
    temp2.trigger('event');
    temp.trigger('this');
    temp2.trigger('this');
   
    temp.stopListening();
 
    temp.trigger('event');
    temp2.trigger('event');
    temp.trigger('this'); 
    temp2.trigger('this');
     
  </script>
</body>
   
</html>

Here on the above code we had no pass any argument to stopListening() function so it will remove all the register event that temp object is listening to.

Output: