Edit this page

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

Setup

The example below demonstrates how to use the events binding.

Example
<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>

DOM Events and Actions

Access DOM Event Argument

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

Stop DOM Event Bubbling

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

The example below demonstrates how to stop DOM event bubbling.

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

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

Prevent 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.

The example below demonstrates how to prevent default actions of DOM events.

Example
<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

Other articles on the Kendo UI MVVM component and bindings:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve the information

close
Dummy