微信小程式開發系列教程
微信小程式開發系列一：微信小程式的申請和開發環境的搭建
微信小程式開發系列二：微信小程式的視圖設計
微信小程式開發系列三：微信小程式的調試方法
微信小程式開發系列四：微信小程式之控制器的初始化邏輯
通過前面四個章節的介紹，大家對微信小程式的視圖和控制器，以及微信調試器的用法已經有了一個最基本的認識了。在這個基礎上，讓我們進一步學習微信小程式控制器，掌握在小程式控制器中響應使用者輸入的方法。
這個例子很簡單，在微信小程式的視圖index.wxml裡，我定義了一個按鈕，和一個文本元素。
點我加1
{{counter}}
文本元素綁定到小程式資料模型的counter字段上，是一個計數器。按鈕綁定了一個事件處理函數jerry_increase。每點選一次按鈕，微信小程式UI上的計數器加一。
為此，首先需要在控制器index.js的data資料模型裡增添一個counter字段。
然後實作button的bindtap綁定的函數jerry_increase。可以看到這個事件處理函數有一個輸入參數e：
當事件處理函數被調用時，這個輸入參數e是微信架構自動傳入到事件處理函數的。通過微信開發者工具的調試器可以看到這個參數e的明細：tap事件發生的X和Y坐标，以及事件類型tap。
我們如果從目前控制器事件處理函數執行棧向外觀察，發現它的前一層，即微信架構層的處理邏輯裡，在調用事件處理函數前後分别取兩個目前的時間戳。如果時間戳之差大于1000毫秒，會執行第30365行的Reporter.slowReport。由此我們看出，微信希望開發者實作的事件處理函數要盡可能高效，執行時間不能超過1秒。在手機使用場景裡，1秒的等待時間對于最終使用者來說是一個相當長的時間了。
另一個值得一提的知識點是，如果直接用JavaScript修改資料模型的值，則UI不會有任何變化。
下面是錯誤的做法：
下面是正确的做法：
我們可以通過單步調試正确的做法來理會其中的奧妙：
可以看到this.setData裡面會調用微信架構的c.default.emit函數，把最新的資料通過emit函數投遞出去。
繼續檢視emit的實作，可以發現emit又調用了微信工具類wx的方法：invokeWebviewMethod。從WAService.js的内部實作，我們能發現其實微信小程式在手機上的執行實際是運作在WebView裡的。
一旦WeixinJSBridge.publish.apply(WeixinJSBridge, e)這一行代碼執行完畢，UI上的計數器才被重新整理。
本文介紹了如果在微信小程式裡編寫JavaScript來響應button的點選事件。
本系列的下一篇文章會介紹微信小程式的button元件提供的一些微信原生功能，比如擷取目前使用者資訊等強大功能的用法。