入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

template 绑定

高级应用

插件

mapping 插件

"event" 绑定

目的

event 绑定在DOM元素上添加指定的事件句柄以便元素被触发的时候执行定义的JavaScript 函数。大部分情况下是用在 keypress, mouseover 和 mouseout上。

The event binding allows you to add an event handler for a specified event so that your chosen JavaScript function will be invoked when that event is triggered for the associated DOM element. This can be used to bind to any event, such as keypress, mouseover or mouseout.

例子

<div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
        Mouse over me
    </div>
    <div data-bind="visible: detailsEnabled">
        Details
    </div>
</div>
<script type="text/javascript">
    var viewModel = {
        detailsEnabled: ko.observable(false),
        enableDetails: function() {
            this.detailsEnabled(true);
        },
        disableDetails: function() {
            this.detailsEnabled(false);
        }
    };
    ko.applyBindings(viewModel);
</script>

每次鼠标在第一个元素上移入移出的时候都会调用view model上的方法来toggle detailsEnabled 的值，而第二个元素会根据 detailsEnabled 的值自动显示或者隐藏。

Now, moving your mouse pointer on or off of the first element will invoke methods on the view model to toggle the detailsEnabled observable. The second element reacts to changes to the value of detailsEnabled by either showing or hiding itself.

参数

主参数

你需要传入的是一个JavaScript对象，他的属性名是事件名称，值是你所需要执行的函数。

You should pass a JavaScript object in which the property names correspond to event names, and the values correspond to the function that you want to bind to the event.

你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： event { mouseover: someObject.someFunction }。

You can reference any JavaScript function - it doesn’t have to be a function on your view model. You can reference a function on any object by writing event { mouseover: someObject.someFunction }.

其它参数
- 无

注1: 传递 “当前项目” 作为处理函数的一个参数

当调用处理程序时， Knockout 将提供当前模型作为第一个参数的值。如果你是用集合中的每个项的呈现UI，当你需要知道事件是指向一个项目。这一点尤为有用。例如，

When calling your handler, Knockout will supply the current model value as the first parameter. This is particularly useful if you’re rendering some UI for each item in a collection, and you need to know which item the event refers to. For example,

<ul data-bind="foreach: places">
    <li data-bind="text: $data, event: { mouseover: $parent.logMouseOver }"> </li>
</ul>
<p>You seem to be interested in: <span data-bind="text: lastInterest"> </span></p>
 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.lastInterest = ko.observable();
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
         // The current item will be passed as the first parameter, so we know which place was hovered over
         self.logMouseOver = function(place) {
             self.lastInterest(place);
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

这个例子有两点需要注意:

如果你在一个嵌套的绑定上下文。例如，如果你在 foreach 或 with 中, 但你处理函数在根 viewmodel 或其他父上下文，您需要使用前缀，例如 $parent 或 $root 来查找处理函数。关于 $parent 和 $root绑定上下文的信息，请参见文档foreach。
viewmodel中，通常很有用，宣布自或其他变量作为别名，则此。这样做可以避免重新定义任何问题，这是第二个事件处理程序或Ajax请求回调。

If you’re inside a nested binding context, for example if you’re inside a foreach or a with block, but your handler function is on the root viewmodel or some other parent context, you’ll need to use a prefix such as $parent or $root to locate the handler function. For more information about $parent, $root, and binding contexts, see the documentation about foreach.
In your viewmodel, it’s often useful to declare self (or some other variable) as an alias for this. Doing so avoids any problems with this being redefined to mean something else in event handlers or Ajax request callbacks.

注2：访问事件源对象

有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：

In some scenarios, you may need to access the DOM event object associated with your event. Knockout will pass the event as the second parameter to your function, as in this example:

<div data-bind="event: { mouseover: myFunction }">
    Mouse over me
</div>
 <script type="text/javascript">
    var viewModel = {
        myFunction: function(data, event) {
            if (event.shiftKey) {
                //do something different when user has shift key down
            } else {
                //do normal action
            }
        }
    };
    ko.applyBindings(viewModel);
</script>

如果你需要的话，可以使用匿名函数的第一个参数传进去，然后在里面调用：

If you need to pass more parameters, one way to do it is by wrapping your handler in a function literal that takes in a parameter, as in this example:

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

这样，KO就会将事件源对象传递给你的函数并且使用了。

Now, KO will pass the event to your function literal, which is then available to be passed to your handler.

另外，您更喜欢在视图中避免功能的文本，你可以使用 bind 函数，具体的参数值函数参考：

Alternatively, if you prefer to avoid the function literal in your view, you can use the bind function, which attaches specific parameter values to a function reference:

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

注3: 允许执行默认事件

默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，使用 event 语法在 input 标签标签上绑定一个 keypress 事件，当你输入内容的时候，浏览器只会调用你的函数而不是添加 input 的值。另外一个例子 "click" 绑定，在执行完自定义事件时它不会不会连接到 href地址。因为你的< code>click 绑定主要就是操作你的view model，而不是连接到另外一个页面。

By default, Knockout will prevent the event from taking any default action. For example if you use the event binding to capture the keypress event of an input tag, the browser will only call your handler function and will not add the value of the key to the input element’s value. A more common example is using the click binding, which internally uses this binding, where your handler function will be called, but the browser will not navigate to the link’s href. This is a useful default because when you use the click binding, it’s normally because you’re using the link as part of a UI that manipulates your view model, not as a regular hyperlink to another web page.

当然，如果你想让默认的事件继续执行，你可以在你 event 的自定义函数里返回 true 。

However, if you do want to let the default action proceed, just return true from your event handler function.

注4：防止事件冒泡

默认情况下，Knockout允许event事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了 mouseover 事件，那么如果你的鼠标在该元素移动的时候两个事件都会触发的。如果需要，你可以通过额外的绑定 youreventBubble 来禁止冒泡。例如：

By default, Knockout will allow the event to continue to bubble up to any higher level event handlers. For example, if your element is handling a mouseover event and a parent of the element also handles that same event, then the event handler for both elements will be triggered. If necessary, you can prevent the event from bubbling by including an additional binding that is named youreventBubble and passing false to it, as in this example:

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

通常， myButtonHandler 会先执行，然后会冒泡执行 myDivHandler 。但一旦你设置了 mouseoverBubble 为 false 的时候，冒泡事件会被禁止。

Normally, in this case myButtonHandler would be called first, then the event would bubble up to myDivHandler. However, the mouseoverBubble binding that we added with a value of false prevents the event from making it past myButtonHandler.

依赖性

除KO核心类库外，无依赖。

Knockout 中文文档帮助手册教程

时间绑定

入门