KnockoutJs學習筆記（十）

event binding主要用於爲指定的事件添加相應的處理函數，能夠做用於任意事件，包括keypress、mouseover、mouseout等（也包括以前提到的click，根據後面的描述，click binding的內部機理其實就是event binding，不過爲什麼要把二者分開有待研究）。

下面是一個簡單的例子：

html部分：

1 <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
2     Mouse over me
3 </div>
4 
5 <div data-bind="visible: detailsEnabled">
6     Details
7 </div>

js部分：

 1 function MyViewModel() {
 2     var self = this;
 3 
 4     self.detailsEnabled = ko.observable(false);
 5 
 6     self.enableDetails = function() {
 7         self.detailsEnabled(true);
 8     };
 9 
10     self.disableDetails = function() {
11         self.detailsEnabled(false);
12     };
13 }
14 
15 ko.applyBindings(new MyViewModel());

event binding的參數應當是一個object，在該object中，屬性名爲指定的事件的名稱，值爲觸發的處理函數。該處理函數能夠是viewModel中定義的函數，也能夠是其餘任意object內的函數。

注意一：在調用event binding的處理函數時，咱們能夠給它傳遞一個參數做爲當前做用的項（current item），這種操做每每在處理集合或是數組時很是有用。

注意二：在某些時候，咱們須要獲取與事件相關聯的DOM event object（提及來聽繞口，我以爲能夠直接就說是包含事件在內的可以觸發相應綁定的處理函數的事件），KO將這個事件做爲處理函數的第二個參數，好比說咱們但願在按下shift鍵時的該事件與通常的事件有所區別，則能夠利用這一參數在處理函數中進行區分。

若是咱們須要傳遞更多的參數，有如下兩種方式：

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

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

注意三：在默認狀況下，使用event binding會屏蔽掉原先event所觸發的默認功能。若是咱們但願恢復默認的功能，只須要在event binding所綁定的處理函數的最後返回一個true便可。

注意四：在某些時候，咱們的html部分可能會存在嵌套的event binding的狀況，具體實例能夠參考以前click binding部分的內容，此時也能夠利用相似的方法來阻止這種狀況，不過不一樣的在於書寫bubble的格式，一個簡單的例子：

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

能夠看出，bubble與event是兩種不一樣的binding，因此bubble不該該出如今event binding的參數中。

---

submit binding也能夠用event binding的方式也出來。submit binding主要適用於form元素，它會覆蓋掉submit事件自己所默認觸發的函數，要啓用默認的方式，須要在綁定的處理函數最後返回true，與click binding、event binding等相似。

KO可以將form element做爲參數傳遞給submit的處理函數，這個參數能夠方便咱們去獲取form element中額外的數據或是狀態信息，或是藉助jQuery Validation等庫來觸發UI級別的有效性檢測。

固然，對於button來講，click binding的效果和submit binding的效果相似，可是做爲做用於form的submit binding，經過按下enter鍵等方式也可以觸發submit binding所綁定的處理函數。

submit binding的參數也並沒必要需要是viewModel內的函數，它也能夠是任意object內的函數，其餘的有關傳遞多個參數等的其餘注意事項能夠參考click binding，兩者在這些方面是基本一致的。