Backbone.js undelegateEvents 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 simply refers to 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.

View’s undelegateEvents() method’s utility is to remove the view’s delegated events from the DOM. It basically unbinds the elements of the specified DOM from the callback method to eliminate events.

Syntax:

undelegateEvents(events)

Used Parameters:

events: This parameter defines the events which are needed to be unattached from the view.

Example 1: The code example below demonstrates how we can implement the undelegateEvents() method of Backbone.js.

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 undelegateEvents View</h3> 
    <div id="divID"></div> 
  
    <script type="text/javascript">  
      
        var ViewDemo = Backbone.View.extend({   
            events: { 
                'click button': 'undelegateBut', 
            },   
            undelegateBut: function () {  
                $(this.el).undelegate('button', 'click');   
                document.write("The button is undelegated");   
            },   
            render: function () {   
                this.$el.html('<button>Click to undelegate</button>');   
            },   
  
            initialize:function(){this.render();}   
        });   
  
        var myview = new ViewDemo({el: '#divID'});   
    </script>   
</body>  
  
</html>

Output:

Example 2: The code example demonstrates how we can configure the undelegateEvents() method for multiple events inside one 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 undelegateEvents View</h3> 
    <strong>Clicking on the input field</strong> 
    <br/><br/> 
    <div id="divID"> 
        <button>Click to undelegate</button> 
        <br/><br/> 
        <input type="button" value="button"></input> 
    </div> 
  
    <script type="text/javascript">   
        var ViewDemo = Backbone.View.extend({   
            events: { 
                'click button': 'undelegateBut', 
                'click input': 'undelegateInp' 
            },   
            undelegateBut: function () {  
                $(this.el).undelegate('input', 'click');   
                document.write("The input field is undelegated");   
            },   
            undelegateInp: function () {   
                $(this.el).undelegate('button', 'click');   
                document.write("The button is undelegated");   
            },  
        });   
  
        var myview = new ViewDemo({el: '#divID'});   
    </script>   
</body>  
</html>