Backbone.js events View

Last Updated : 10 Aug, 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 in View 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>"

There are a number of Events available in the View like click, change, keypress, submit, mouseover, dbclick, etc.

Syntax:

var demoView = Backbone.View.extend({
    events: {
        'click button: 'function1',
        'keypress label': 'function2',
    },
    ...
})

Example 1: The code below demonstrates how we can apply the click event in a View which also removes the 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>Backbone.js events View</h3> 
  
    <div id="content"></div> 
  
    <script type="text/javascript"> 
        var myView = Backbone.View.extend({ 
           events: { 
             'click input': 'removeView' 
           }, 
           removeView: function () { 
             demo.remove(); 
             document.write("This View has been removed.") 
           }, 
           render: function () { 
             this.$el.html( 
'<input type="button" value="Click to remove view"></input>'); 
           }, 
           initialize: function () { this.render(); } 
        }); 
        var demo = new myView({ el: '#content' });   
    </script> 
</body> 
  
</html>

Output:

Example 2: The code below demonstrates how we can implement the change, changeId 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>Backbone.js  events View</h3> 
    <div id="div_1"> 
        First Input Field: <input type="text"> 
    </div> 
    <br> 
    <div id="div_2"> 
        Second Input Field: <input type="text" id="two"> 
    </div> 
  
    <script type="text/javascript">   
        var ViewDemo1 = Backbone.View.extend({   
            events: { 
                'change input': 'myFunc1',   
            },   
            myFunc1: function () {   
                document.write("This is the First Input Field.")  
            },   
        });   
        var ViewDemo2 = Backbone.View.extend({   
            events: {   
                'change #two': 'myFunc2' 
            },   
            myFunc2: function () {   
                document.write("This is the Second Input Field.")  
            },   
        });   
        var myView1 = new ViewDemo1({el: '#div_1'});   
        var myView2 = new ViewDemo2({el: '#div_2'});   
    </script>   
</body> 
  
</html>