KnockoutJs学习笔记（十）

event binding主要用于为指定的事件添加相应的处理函数，能够做用于任意事件，包括keypress、mouseover、mouseout等（也包括以前提到的click，根据后面的描述，click binding的内部机理其实就是event binding，不过为什么要把二者分开有待研究）。

下面是一个简单的例子：

html部分：

1 <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
2     Mouse over me
3 </div>
4 
5 <div data-bind="visible: detailsEnabled">
6     Details
7 </div>

js部分：

 1 function MyViewModel() {
 2     var self = this;
 3 
 4     self.detailsEnabled = ko.observable(false);
 5 
 6     self.enableDetails = function() {
 7         self.detailsEnabled(true);
 8     };
 9 
10     self.disableDetails = function() {
11         self.detailsEnabled(false);
12     };
13 }
14 
15 ko.applyBindings(new MyViewModel());

event binding的参数应当是一个object，在该object中，属性名为指定的事件的名称，值为触发的处理函数。该处理函数能够是viewModel中定义的函数，也能够是其余任意object内的函数。

注意一：在调用event binding的处理函数时，咱们能够给它传递一个参数做为当前做用的项（current item），这种操做每每在处理集合或是数组时很是有用。

注意二：在某些时候，咱们须要获取与事件相关联的DOM event object（提及来听绕口，我以为能够直接就说是包含事件在内的可以触发相应绑定的处理函数的事件），KO将这个事件做为处理函数的第二个参数，好比说咱们但愿在按下shift键时的该事件与通常的事件有所区别，则能够利用这一参数在处理函数中进行区分。

若是咱们须要传递更多的参数，有如下两种方式：

1 <div data-bind="event: { mouseover: function(data, event) { myFunction('param1', 'param2', data, event) } }">
2     Mouse over me
3 </div>

1 <button data-bind="event: { mouseover: myFunction.bind($data, 'param1', 'param2') }">
2     Click me
3 </button>

注意三：在默认状况下，使用event binding会屏蔽掉原先event所触发的默认功能。若是咱们但愿恢复默认的功能，只须要在event binding所绑定的处理函数的最后返回一个true便可。

注意四：在某些时候，咱们的html部分可能会存在嵌套的event binding的状况，具体实例能够参考以前click binding部分的内容，此时也能够利用相似的方法来阻止这种状况，不过不一样的在于书写bubble的格式，一个简单的例子：

1 <div data-bind="event: { mouseover: myDivHandler }">
2     <button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
3         Click me
4     </button>
5 </div>

能够看出，bubble与event是两种不一样的binding，因此bubble不该该出如今event binding的参数中。

---

submit binding也能够用event binding的方式也出来。submit binding主要适用于form元素，它会覆盖掉submit事件自己所默认触发的函数，要启用默认的方式，须要在绑定的处理函数最后返回true，与click binding、event binding等相似。

KO可以将form element做为参数传递给submit的处理函数，这个参数能够方便咱们去获取form element中额外的数据或是状态信息，或是借助jQuery Validation等库来触发UI级别的有效性检测。

固然，对于button来讲，click binding的效果和submit binding的效果相似，可是做为做用于form的submit binding，经过按下enter键等方式也可以触发submit binding所绑定的处理函数。

submit binding的参数也并没必要需要是viewModel内的函数，它也能够是任意object内的函数，其余的有关传递多个参数等的其余注意事项能够参考click binding，两者在这些方面是基本一致的。