Events Binding

The Kendo UI Events (events) binding attaches methods of the View-Model to specified DOM events.

The methods will be invoked when the associated DOM event is raised.

Getting Started

The following example demonstrates how to use the events binding.

<div id="view">
    <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
    <span data-bind="visible: isDescriptionShown, text: description"></span>
</div>
<script>
    var viewModel = kendo.observable({
        description: "Description",
        isDescriptionShown: false,
        showDescription: function(e) {
            // show the span by setting isDescriptionShown to true
            this.set("isDescriptionShown", true);
        },
        hideDescription: function(e) {
            // hide the span by setting isDescriptionShown to false
            this.set("isDescriptionShown", false);
        }
    });

    kendo.bind($("#view"), viewModel);
</script>

Accessing DOM Event Arguments

Kendo UI MVVM supplies the DOM event argument wrapped in a jQuery Event object.

Preventing DOM Event Bubbling

To prevent the event from bubbling up the DOM tree, use the stopPropagation method.

<span data-bind="events: { click: click }">Click</span>
<script>
    var viewModel = kendo.observable({
        click: function(e) {
            e.stopPropagation();
        }
    });

    kendo.bind($("span"), viewModel);
</script>

Preventing Default Actions of DOM Events

Some DOM events have a default action. For example, the click event may navigate to another page or submit a form. To prevent the default action, use the preventDefault method.

<a href="http://example.com" data-bind="events: { click: click }">Click</a>
<script>
    var viewModel = kendo.observable({
        click: function(e) {
            // stop the browser from navigating to http://example.com
            e.preventDefault();
        }
    });

    kendo.bind($("a"), viewModel);
</script>

See Also

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the HTML Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding