Backbone.JS on() Event

The Backbone.JS event on() method binds an event to an object and executes the callback when an event is fired.

Syntax:

object.on(event, callback, context)    

Parameters:
event: This parameter is used to specify the event whose binding with an object is needed.
callback: This parameter is used to specify the callback function that will be executed when an event is fired.
context: This is an optional parameter which is used to specify an object to be used to pass to a callback function.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<title>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>
<script type="text/javascript">
var X = _.extend({msg:'Hello World'}, Backbone.Events);
X.on('func', function () {
document.write("Triggered message: ");
document.write(this.msg);
});
X.trigger('func');
</script>Triggered message: Hello World
<title>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> <script type="text/javascript"> var X = _.extend({msg:'Hello World'}, Backbone.Events); X.on('func', function () { document.write("Triggered message: "); document.write(this.msg); }); X.trigger('func'); </script>Triggered message: Hello World
 

  
Example  
  
  
  
  
  
Triggered message: Hello World  
  


  

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Triggered message: Hello World
Triggered message: Hello World
Triggered message: Hello World

Explanation:
The on() method will bind the event to an object. The function will then be executed when triggered and thus the message will be displayed.