Explain Built-in Events in Backbone.js

Last Updated : 25 Oct, 2022

Backbone.js is a compact library used to organize JavaScript code. An MVC/MV* framework is another term for it. If MVC is unfamiliar to you, it is just a technique for designing user interfaces. The creation of a program’s user interface is made considerably easier by JavaScript functions. BackboneJS provides a variety of building elements to aid developers in creating client-side web applications, including models, views, events, routers, and collections.

Events allow us to directly attach event listeners to el, custom selectors, related selectors, and related selectors as well as to el if no selection is supplied. An event is represented by a key-value pair:

"<eventName> <selector>" : "<callbackFunction>"

Build-in events are events that are already pre-defined in the Backbone.js library and can be used straight up. A number of DOM event types are supported, including click, submit, mouseover, dblclick, etc.

Syntax:

events: {
    'click button: 'function1',
    'keypress label': 'function2',
},

Example 1: The code below demonstrates how we can apply the change, change Id events in a view.

HTML

<!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>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>Explain Built-in Events in Backbone.js.</h3>
    <div id="div-1">
        Enter some text to trigger the First Function: 
        <input type="text"></input>
    </div>
    <div id="div-2">
        Enter some text to trigger the Second Function: 
        <input type="text" id="hel"></input>
    </div>
 
    <script type="text/javascript">  
        var DemoView1 = Backbone.View.extend({  
            events: {
                'change input': 'demoFunc1',  
            },  
            demoFunc1: function () {  
                console.log("Function 1 is called.") 
            },  
        });  
        var DemoView2 = Backbone.View.extend({  
            events: {  
                'change #hel': 'demoFunc2'  
            },  
            demoFunc2: function () {  
                console.log("Function 2 is called.") 
            },  
        });  
        var demo1 = new DemoView1({el: '#div-1'});  
        var demo2 = new DemoView2({el: '#div-2'});  
    </script>  
</body>
</html>

Output:

Example 2: The code below demonstrates how we can implement the routes event and how we can define it inside a Router.

HTML

<!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>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <h3>Explain Built-in Events in Backbone.js.</h3>
    <div id = "content">
        <button><a href="#/first_link">
              Click for First Route</a>
          </button>
        <button><a href="#/second_link">
              Click for Second Route</a>
          </button>
    </div>
 
    <script type="text/javascript">
 
        var demoRouter = Backbone.Router.extend({
            routes: {
                'first_link': 'first_route',
                'second_link': 'second_route'
            },
            first_route: function () {
                console.log("First Route called.");
            },
 
            second_route: function () {
                console.log("Second Route called.");
            },
        });
        var mydemo = new demoRouter({});
 
        Backbone.history.start();
    </script>
</body>
</html>