Backbone.js delegateEvents View

Last Updated : 08 Aug, 2022

Backbone.js delegateEvents method provides us with a way to bind the elements with the specific HTML DOM. It also provides us with advantages over manually implementing jQuery to bind the events with the child elements during invocation of the render function. Every callback attached to it is bound to the view object. When we run delegate events with different events hash, callbacks are removed and delegated.

Syntax:

delegateEvents(events)

Parameters:

events: It describes the events which are needed for attachment to the view.

Example 1:

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 style="background-color:black;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <div id="mydiv"></div>
    <script type="text/javascript">
        var delview = Backbone.View.extend({
            events: { 'click button': 'delegateFunc' },
            delegateFunc: function () {
                this.remove();
                window.alert("[delegate event]");
                document.write(
            "<h1 style='color:blue;'>GeeksforGeeks</h1>");
            },
 
            render: function () {
                this.$el.html(
            '<button>Invoke delegate event:</button>');
            },
            initialize: function () { this.render(); }
        });
        var object = new delview({ el: '#mydiv' });
        object.delegateEvents();  
    </script>
</body>
 
</html>

Output:

Example 2:

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 style="background-color:black;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <div id="mydiv"></div>
    <script type="text/javascript">
        var delview = Backbone.View.extend({
            events: { 'click button': 'delegateFunc' },
            delegateFunc: function () {
                document.write(
"<p style='color:black;'>Example of delegate event</p>
"
                );
                document.write(
            "<h1 style='color:blue;'>GeeksforGeeks</h1>"
                );
            },
 
            render: function () {
                this.$el.html(
                '<button>Invoke delegate event:</button>'
                );
            },
            initialize: function () {
                document.write(
"<p style='color:white;'>Example of delegate event</p>
"
                );
                this.render();
            }
        });
        var object = new delview({ el: '#mydiv' });
        object.delegateEvents();  
    </script>
</body>
 
</html>