Click綁定對DOM元素添加一個函數，當DOM元素被點擊的時候調用。在button,input 或者a標簽中常用，但其實他適用於任何可見的DOM元素。
example(click綁定)
@{ Layout = null; } <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/knockout-3.2.0.js"></script> <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); } }; ko.applyBindings(viewModel); </script>
每當你點擊button按鈕的時候，viewModel 里面的incrementClickCounter() 函數被調用，然后更新 numberOfClicks 的值，然后更新界面
我們可以調用任何javaScript函數，可以不在view model里面，也可以以someObject.someFunction的形式調用函數。
example(傳遞本身綁定值作為參數)
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<ul data-bind="foreach: places">
<li>
<!--foreach里面上下文是每一個place,可以用$data來表示當前項的值-->
<span data-bind="text: $data"></span>
<!--這兒也在foreach里面，所以click綁定對應的上下文也是$data,然后用$parent來調用其父項目，也就是viewModel，然后調用里面的removePlace函數-->
<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']);
//當前項的值會被傳遞過來作為第一個參數，所以我們知道數組里面的哪一項被移除
self.removePlace = function (place) {
self.places.remove(place)
}
}
ko.applyBindings(new MyViewModel());
</script>
在這個例子中有兩點要注意：
- 如果是在一個嵌套的綁定上下文，例如在一個foreach綁定，或者with塊綁定，但是你要調用viewmodel下面的函數，這時候你需要一個調用當前節點的父節點，或者直接調用根節點去訪問需要調用的函數，語法父節點用$parent，根節點用$root;
- viewmodel里面用把this用一個self變量表示，相當於this的別名，防止在一些情況下引起的作用域鏈混亂；
example(把事件傳遞給click調用的函數)
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<button data-bind="click: myFunction">點擊</button>
<script type="text/javascript">
var viewModel = {
//這兒的data,就是上個例子中我們傳遞過去綁定上下文的值
myFunction: function (data, event) {
if (event.shiftKey) {
//這兒對於click事件來說一般用不到，因為已經確定是click 事件了。
alert("shift");
} else {
//執行點擊時操作
alert("normal");
}
}
};
ko.applyBindings(viewModel);
</script>
這個例子展示了給把事件句柄傳遞給函數，其中data指的是綁定上下文的值，其實也是指上個例子中的place
example(傳遞任意參數給調用函數)
如果你想傳任意的參數給調用函數，你可以用一個函數字面量來作為一個參數，意思就是說，click后面你可以傳遞任何javascript變量，因為javascript語法的特殊形式，一個函數也能作為變量傳遞，所以可以直接在click后面寫一個匿名函數，然后在該函數里面直接調用你想到調用的函數，同時把參數傳遞過去。
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<button data-bind="click: myFunction">點擊</button>
<button data-bind="click: function(data, event) { myFunction('param1', 'param2', data, event) }">
Click me
</button>
<script type="text/javascript">
var viewModel = {
myFunction: function (parameter1, parameter2, parameter3, parameter4) {
}
};
ko.applyBindings(viewModel);
</script>
除了用函數字面量的這種辦法，我們還可以用另一種辦法，用knockout的綁定函數，語法為函數名.bing(里面可以傳遞參數);
<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
Click me
</button>
阻止DOM元素的默認事件
默認情況下，當你對一個DOM元素綁定一個click事件后，當你點擊的時候，他只會執行你的click事件，不會執行該DOM元素的默認事件。例如a標簽，當你給他綁定了一個事件后，點擊，執行綁定事件，但是他不會跳轉該a標簽指向的連接，如果你想讓它繼續執行，可以返回一個true;
<script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/knockout-3.2.0.js"></script> <a href="http://www.cnblogs.com/santian/" data-bind="click: myFunction.bind($data, 'param1', 'param2')"> Click me </a> <script type="text/javascript"> var viewModel = { myFunction: function (parameter1, parameter2, parameter3, parameter4) { alert(1); //這兒如果你不return true,就不會跳轉 //return true; } }; ko.applyBindings(viewModel); </script>
阻止事件冒泡
阻止事件冒泡，用如下語法
<div data-bind="click: myDivHandler">
<button data-bind="click: myButtonHandler, clickBubble: false">
Click me
</button>
</div>
作者：一天兩天三天
本文地址：http://www.cnblogs.com/santian/p/4348532.html
博客地址：http://www.cnblogs.com/santian/