Events is a module that can be bind with an object and trigger custom events.you can bind the custom events by using the your custom name.You do not need to declared events before they are bound.
There are several method of Event
- on :
object.on(event, callback, [context])
1)event − It binds an object.
2)callback − It is the reference to the code.
3)context − An java script object that can be passed to a callback function.
Below is the example of "on" method.
Example
<!DOCTYPE
html>
<html>
<head>
<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
obj = {};
_.extend(obj,
Backbone.Events);
obj.on("PassMsg",
function
(Mymsg)
{
document.write(Mymsg);
});
obj.trigger("PassMsg",
"I
am learing BackboneJS");
</script>
</head>
</html>
Output :
- off
: object.off([event], [callback], [context])
Clear object with previously-bound callback function . If no
context is specified, all of the versions of the callback with
different contexts will be removed.
1)event − It binds an object.
2)callback − It is the reference to the code.
3)context − An java script object that can be passed to a callback function.
2)callback − It is the reference to the code.
3)context − An java script object that can be passed to a callback function.
Example
<!DOCTYPE
html>
<html>
<head>
<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
obj = {};
_.extend(obj,
Backbone.Events);
var
Function1 = function
()
{
document.write('I
am learing BackBoneJS
');
');
};
var
Function2 = function
()
{
document.write('I
am learing Backbone Events
');
');
};
document.write('-------------Before
calling off fuction-----------
');
');
obj.on("PassMsg",
Function1);
obj.on("PassMsg",
Function2);
obj.trigger("PassMsg");
obj.off("PassMsg",
Function1);
document.write('-------------After
calling off fuction------Function1 is off-----
');
');
obj.trigger("PassMsg");
</script>
</head>
</html>
Output
-------------Before calling off fuction-----------
I am learing BackBoneJS
I am learing Backbone Events
-------------After calling off fuction------Function1 is off-----
I am learing Backbone Events
I am learing BackBoneJS
I am learing Backbone Events
-------------After calling off fuction------Function1 is off-----
I am learing Backbone Events
Trigger : Trigger callbacks functions for the given event.
object.trigger(event, [*args])
event − It binds an object.
args − It passes arguments to the callback function.
We will again see the same example to know how trigger works.
object.trigger(event, [*args])
event − It binds an object.
args − It passes arguments to the callback function.
We will again see the same example to know how trigger works.
<!DOCTYPE
html>
<html>
<head>
<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
obj = {};
_.extend(obj,
Backbone.Events);
obj.on("PassMsg",
function
(Mymsg)
{
document.write(Mymsg);
});
obj.trigger("PassMsg",
"I
am learing BackboneJS");
</script>
</head>
</html>
Output :
