Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

本文链接：https://blog.youkuaiyun.com/mapdigit/article/details/10832623

本文介绍了KendoUI中如何使用Events绑定来连接视图模型的方法到DOM元素的事件处理程序，包括鼠标悬停显示描述的例子及如何阻止事件冒泡和默认行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似，为事件绑定的一般形式。
Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理（如鼠标事件）。
例如：

 
    1<div id="view">
 
    2    <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show description</span>
 
    3    <span data-bind="visible: isDescriptionShown, text: description"></span>
 
    4</div>
 
    5<script>
 
    6    var viewModel = kendo.observable({
 
    7        description: "Description",
 
    8        isDescriptionShown: false,
 
    9        showDescription: function (e) {
 
    10            // show the span by setting isDescriptionShown to true
 
    11            this.set("isDescriptionShown", true);
 
    12        },
 
    13        hideDescription: function (e) {
 
    14            // hide the span by setting isDescriptionShown to false
 
    15            this.set("isDescriptionShown", false);
 
    16        }
 
    17    });
 
    18 
 
    19    kendo.bind($("#view"), viewModel);
 
    20</script>

实际上，click绑定是events绑定的一个特例，下面的两种实现是等效的：

 
    1<span data-bind="click: clickHandler"></span>
 
    2 
 
    3<span data-bind="events: { click: clickHandler }"></span>

注： Kendo MVVM的 DOM 事件参数 e封装在jQuery 的Event对象中。

中止事件向上传递

如果需要终止事件向上传递(event bubbling)，可以调用stopPropagation方法。

 
    1<span data-bind="click: click">Click</span>
 
    2<script>
 
    3var viewModel = kendo.observable({
 
    4    click: function(e) {
 
    5        e.stopPropagation();
 
    6    }
 
    7});
 
    8 
 
    9kendo.bind($("span"), viewModel);
 
    10</script>

停止事件缺省处理

如果要取消某些DOM元素单击后的缺省处理函数，比如转到其它页面或是提交表单，为了取消这些缺省实际处理，可以调用preventDefault()方法。例如：

 
    1<a href="http://example.com" data-bind="click: click">Click</span>
 
    2<script>
 
    3var viewModel = kendo.observable({
 
    4    click: function(e) {
 
    5        // stop the browser from navigating to http://example.com
 
    6        e.preventDefault();
 
    7    }
 
    8});
 
    9 
 
    10kendo.bind($("a"), viewModel);
 
    11</script>