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

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

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>