本篇和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>

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

实际上,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>
3 var viewModel = kendo.observable({
4     click: function(e) {
5         e.stopPropagation();
6     }
7 });
8  
9 kendo.bind($("span"), viewModel);
10 </script>

停止事件缺省处理

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

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