KnockoutJS学习笔记14：KonckoutJS click绑定

KnockoutJS click绑定是为指定的DOM元素添加单击事件，因此它所对应的参数必须是一个处理函数。click绑定通常被用在按钮或者<a>标签中，当然，其它的页面元素同样适用。

示例代码：

<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>

<script type="text/javascript">
var viewModel = {
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
};
</script>
访问click处理函数的参数
click的处理函数接收两个参数，分别是绑定到当前元素的数据和鼠标事件。

对于上面的例子，我们的第一个参数是viewModel本身，如果foreach绑定，那么第一个参数则是绑定到当前DOM中的项。示例代码：

<ul data-bind="foreach: places">
<li>
<span data-bind="text: $data"></span>
<button data-bind="click: $parent.removePlace">Remove</button>
</li>
</ul>

<script type="text/javascript">
function MyViewModel() {
var self = this;
self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);

    // The current item will be passed as the first parameter, so we know which place to remove
    self.removePlace = function (place) {
        self.places.remove(place)
    }
}
ko.applyBindings(new MyViewModel());

</script>
对于第二个参数：鼠标事件，访问的则是事件本身。我们直接看代码：

<button data-bind="click: myFunction">
Click me
</button>

<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>
另外，除了指定的参数之外，我们还可以自定义参数，自定义参数需要使用到bind方法，代码如下：

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>
对于<a>标签的处理
如果你将一个click绑定用在<a>标签中，默认情况下ko会阻止页面跳转到<a>标签所指定的href页面中。如果你不希望ko改变<a>标签的动作，就要在处理函数中返回true。

冒泡事件
ko默认是开启冒泡事件支持的。例如为一个div绑定了click事件，而div中的button也绑定了click事件，这个时候点击button的时候，button和div的单击事件都会被执行，这是因为冒泡事件的原因。

如果你要阻止冒泡事件，可以使用下面的代码：

<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>