"click" 绑定

click 绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button, input, 和链接 a上, 但是可以在任意元素上使用。

• 绑定DOM元素的单击事件到指定的函数。
• 如果是在一个foreach绑定上下文内部，使用click绑定，则会自动获取当前的数据对象作为第一个参数，传入到click事件。
• click事件默认的参数第2个是事件对象evt,如果还需要更多的参数，则需要自己在外部包装一层函数(不过笔者认为这种场景非常少，且可以通过其他方式获取参数)

基本用法

Html代码

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

 var viewModel = {
        myFunction: function(data, event) {
            alert('clicked!')
        }
    };
    ko.applyBindings(viewModel);

当点击button按钮时，调用myFunction函数。

下面演示一些特殊的用法

Demo1：演示传递"当前项目"作为处理函数的一个参数

Html代码

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

function MyViewModel() {
      var self = this;
	  self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
	  self.removePlace = function(place) {
	      self.places.remove(place)
	  }
}
ko.applyBindings(new MyViewModel());

当你的click绑定在一个嵌套的环境中时，例如，在 foreach 或 with 中，那么当click绑定的函数被调用时， Knockout 将提供当前项作为绑定函数的第一个参数。

Demo2：演示获取当前DOM的event对象

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

Html代码

<button data-bind="click: myFunction">
       点击我获取DOM的Event对象
</button>

var MyViewModel = {
    myFunction: function(data, event) {
        if (event.shiftKey) {
            alert("您按了shift键");
        } else {
            alert("您没有按shift键");
        }
    }
};
ko.applyBindings(MyViewModel);

Demo3：演示添加自定义参数

<button data-bind="click: function(data,evt){ myFunction2(data,evt,'我的参数1','我的参数2')}">
        点击我传递更多参数
</button>

var MyViewModel = {    
    myFunction2: function(data, event,para1,para2) {

        alert('data=' + data);
        alert('event=' + event);
        alert('para1='+para1);
        alert('para2='+para2);
    }
};

ko.applyBindings(MyViewModel);

Demo4：演示允许执行默认事件

默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，如果你用 click 绑定1个 a 标签 (a链接)，在执行完自定义事件时它 不会 链接 href地址。这特别有用是因为你的自定义事件主要就是操作你的view model，而不是连接到另外一个页面。当然，如果你可以让默认的事件继续执行，你可以在你 click 的自定义函数里返回 true。

Html代码

<a href="http://www.baidu.com" data-bind="click: myFunction">百度</a>

var MyViewModel = {
    myFunction: function() {
	return true;//返回true时，链接到百度。默认不链接
    }
};
ko.applyBindings(MyViewModel);

Demo5：演示防止事件冒泡

Html代码

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

 var MyViewModel = {
    myDivHandler: function() {
	    alert("myDivHandler");
    },
    myButtonHandler: function() {
	    alert("myButtonHandler");
    }
};

ko.applyBindings(MyViewModel);