The Backbone.JS event listenTo() method is used to inform one object to listen to another object’s event. When an event occurs, it provides a callback function. It also keep a track for the events. The attribute of the events in Backbone.JS to get mixed to any object is an advantage.
Syntax:
object.listenTo(other, event, callback)
Parameters:
other: This parameter is used to specify the name of the other object.
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.
Example:
<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 ({msg1: 'Hello World. I am here to listen to you.'}, Backbone.Events);
var Y = _.extend ({msg2: 'How are you? This is an example for Event listenTo() method.'}, Backbone.Events);
document.write("The triggered message for you is: ");
document.write(this.msg2);
Y.listenTo(X, 'func', func);
</script>The triggered message for you is: How are you? This is an example for Event listenTo() method.
<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 ({msg1: 'Hello World. I am here to listen to you.'}, Backbone.Events);
var Y = _.extend ({msg2: 'How are you? This is an example for Event listenTo() method.'}, Backbone.Events);
var func = function(){
document.write("The triggered message for you is: ");
document.write(this.msg2);
};
Y.listenTo(X, 'func', func);
X.trigger('func');
</script>The triggered message for you is: How are you? This is an example for Event listenTo() method.
Example
The triggered message for you is: How are you? This is an example for Event listenTo() method.
Output:
The triggered message for you is: How are you? This is an example for Event listenTo() method.
The triggered message for you is: How are you? This is an example for Event listenTo() method.
The triggered message for you is: How are you? This is an example for Event listenTo() method.
Explanation:
The Event listenTo() method will inform one object to listen to another object’s event. When an event occurs, it provides a callback function. Here, the object Y listens for the ‘func’ event triggered on the object X. The X has no ‘func’ event and thus displays the value of Y.