前言javascript
click绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在button,input和链接a上,可是能够在任意元素上使用。java
简单示例app
<h2>ClickBind</h2> <div> You've clicked <span data-bind="text: numberOfClicks"></span> times <button data-bind="click: incrementClickCounter">Click me</button> </div> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { numberOfClicks: ko.observable(0), incrementClickCounter: function() { var previousCount = this.numberOfClicks(); this.numberOfClicks(previousCount + 1); } }; ko.applyBindings(viewModel); </script>
预览效果函数
每次点击按钮的时候,都会调用incrementClickCounter()函数,而后更新自动更新点击次数。this
你能够声明任何JavaScript函数 – 不必定非要是view model里的函数。你能够声明任意对象上的任何函数,例如: someObject.someFunction。spa
View model上的函数在用的时候有一点点特殊,就是不须要引用对象的,直接引用函数自己就好了,好比直接写incrementClickCounter 就能够了,而无需写成: viewModel.incrementClickCounter(尽管是合法的)。debug
传参数给你的click 句柄3d
最简单的办法是传一个function包装的匿名函数:code
<button data-bind="click: function() { viewModel.myFunction('param1', 'param2') }"> Click me </button>
这样,KO就会调用这个匿名函数,里面会执行viewModel.myFunction(),而且传进了'param1' 和'param2'参数。对象
访问事件源对象
有些状况,你可能须要使用事件源对象,Knockout会将这个对象传递到你函数的第一个参数:
<button data-bind="click: myFunction"> Click me event </button> <script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script> <script type="text/javascript"> var viewModel = { numberOfClicks: ko.observable(0), incrementClickCounter: function() { var previousCount = this.numberOfClicks(); this.numberOfClicks(previousCount + 1); }, myFunction: function (event) { ////// } }; ko.applyBindings(viewModel); </script>
若是你须要的话,可使用匿名函数的第一个参数传进去,而后在里面调用:
<button data-bind="click: function(event) { viewModel.myFunction(event, 'param1', 'param2') }"> Click me </button>
这样,KO就会将事件源对象传递给你的函数而且使用了。
容许执行默认事件
默认状况下,Knockout会阻止冒泡,防止默认的事件继续执行。例如,若是你点击一个a链接,在执行完自定义事件时它不会链接到href地址。这特别有用是由于你的自定义事件主要就是操做你的view model,而不是链接到另一个页面。
固然,若是你想让默认的事件继续执行,你能够在你click的自定义函数里返回true。
防止事件冒泡
默认状况下,Knockout容许click事件继续在更高一层的事件句柄上冒泡执行。例如,若是你的元素和父元素都绑定了click事件,那当你点击该元素的时候两个事件都会触发的。若是须要,你能够经过额外的绑定clickBubble来禁止冒泡。例如:
<div data-bind="click: myDivHandler"> <button data-bind="click: myButtonHandler, clickBubble: false"> Click me </button> </div>
默认状况下,myButtonHandler会先执行,而后会冒泡执行myDivHandler。但一旦你设置了clickBubble为false的时候,冒泡事件会被禁止。