KnockoutJs学习笔记（十）

浏览数：24 / 时间：2015年06月09日

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>