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:
<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:
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.