KnockoutJs学习笔记（十）

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

下面是一个简单的例子：

html部分：

<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
    Mouse over me
</div>

<div data-bind="visible: detailsEnabled">
    Details
</div>

js部分：

function MyViewModel() {
    var self = this;

    self.detailsEnabled = ko.observable(false);

    self.enableDetails = function() {
        self.detailsEnabled(true);
    };

    self.disableDetails = function() {
        self.detailsEnabled(false);
    };
}

ko.applyBindings(new MyViewModel());

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

注意一：在调用event binding的处理函数时，我们可以给它传递一个参数作为当前作用的项（current item），这种操作往往在处理集合或是数组时非常有用。

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

如果我们需要传递更多的参数，有以下两种方式：

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

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

注意三：在默认情况下，使用event binding会屏蔽掉原先event所触发的默认功能。如果我们希望恢复默认的功能，只需要在event binding所绑定的处理函数的最后返回一个true即可。

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

<div data-bind="event: { mouseover: myDivHandler }">
    <button data-bind="event: { mouseover: myButtonHandler }, mouseoverBubble: false">
        Click me
    </button>
</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，二者在这些方面是基本一致的。