Backbone.js trigger Event

Last Updated : 19 May, 2022

Backbone.js trigger Event is used to invoke or callback the function for the given event or a space-delimited list of events. The subsequent arguments will be passed along to the event callbacks in order to trigger it.

Syntax:

object.trigger(event, [*args])

Parameter Values:

event: It is used to bind an object with an event.
args: It is used to pass values or arguments to the callback function.

Example: This example describes the trigger event in Backbone.js.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js trigger Event</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>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h3>Backbone.js trigger Event</h3>
    
    <script type="text/javascript">
        var gfgVar = _.extend({
            title: 'GeeksforGeeks',
            site:
`<a href="https://www.geeksforgeeks.org/">GeeksforGeeks</a>`,
        }, Backbone.Events);
    
        gfgVar.on('gfgFunc', function () {
            document.write(`This is `
                + this.title
                + ` & is the triggered value for site is: `
                + this.site);
        });
    
        gfgVar.trigger('gfgFunc');
    </script>
</body>

</html>

Here, the _.extend() function is used to create a copy of all of the properties of the source objects over the destination object and return the destination object.

Output:

Example: This example describes the Backbone.js trigger Event using the <iframe> tag.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Backbone.js Event trigger Event</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>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <h3>Backbone.js trigger Event</h3>
    
    <script type="text/javascript">
        var gfgVar = _.extend({
            title: 'GeeksforGeeks',
            site: `<iframe src=
                "https://www.geeksforgeeks.org/"
                height="200"
                width="400">        
        </iframe>`,
        }, Backbone.Events);

        gfgVar.on('gfgFunc', function () {
            document.write(this.title
                + ` website is placed inside the iframe<br>`
                + ` & is the triggered value for site is: <br>`
                + this.site);
        });

        gfgVar.trigger('gfgFunc');
    </script>
</body>

</html>

Output:

Reference: https://backbonejs.org/#Events-trigger

Backbone.js extend Router

bijaybhaskar

Improve

Article Tags :

Backbone.js trigger Event

Similar Reads

Thank You!

What kind of Experience do you want to share?