BackboneJS - Event listenTo

Description

It tells an object to listen to an event on another object. It keeps track of events and provides callback function when an event occurs.

Syntax

object.listenTo(other, event, callback)

Parameters

other − It defines name of the other object.
event − It binds an object.
callback − It is reference to the code.

Example

Live Demo

<!DOCTYPE html>
<html>
   
   <head>
      <title>Event Once 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>
      <script type = "text/javascript">
         // Create an object 'myVal' and 'myVal1' and extend them using Backbone.Events method
         var myVal = _.extend({name:'Hello..'}, Backbone.Events);
         var myVal1 = _.extend({name:'Welcome to TutorialsPoint!!!'}, Backbone.Events);

         // create the 'listenMe' callback function and invoke when one object 
         // listens to particular event on another object
         var listenMe = function() {
            document.write("The value is: ");
            document.write(this.name);
         };
         // The object 'myVal1' listens once for the 'listenMe' event triggered on object 'myVal'
         myVal1.listenTo(myVal, 'listenMe', listenMe);

         // The 'myVal' has no listenMe event and displays the value of 'myVal1'
         myVal.trigger('listenMe');
      </script>
      
   </body>
</html>

Output

Let us carry out the following steps to see how the above code works −

Save the above code in listento.htm file.
Open this HTML file in a browser.

backbonejs_events.htm