標籤：jquery mobile html5 jqm jqm中事件 jqm綁定事件
程式員都很懶，你懂的！
生命的絕唱來機只爭朝夕，如詩的年華更需惜時如金。不要讓今天的懈怠成為一生的痛。
每天都在進步。最近在學習jquery mobile開發，使用的button，綁定事件，和大家一起學習，一起分享！
直接上代碼：
<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"><script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script></head><body><div data-role="page" id="pageone"> <div data-role="header"> <h1>組合按鈕</h1> </div> <div data-role="content"> <div data-role="controlgroup" data-type="horizontal"> <p>水平組合按鈕:</p> <a href="#" data-role="button" id="btn1">我綁定事件了</a> <a href="#" data-role="button" id="btn2">方法2綁定事件</a> <a href="#" data-role="button" id="btn3">按鈕 3 blur</a> </div><br> <div data-role="controlgroup" data-type="vertical"> <p>垂直組合按鈕 (預設):</p> <a href="#" data-role="button">按鈕 1</a> <a href="#" data-role="button">按鈕 2</a> <a href="#" data-role="button">按鈕 3</a> </div> <p>內聯按鈕且不帶圓角:</p> <a href="#" data-role="button" data-inline="true">按鈕 1</a> <a href="#" data-role="button" data-inline="true">按鈕 2</a> <br> <a href="#" data-role="button" data-inline="true" data-corners="false">按鈕 1</a> <a href="#" data-role="button" data-inline="true" data-corners="false">按鈕 2</a> <p>內聯按鈕：普通與迷你</p> <a href="#" data-role="button" data-inline="true">按鈕 1</a> <a href="#" data-role="button" data-inline="true">按鈕 2</a> <br> <a href="#" data-role="button" data-inline="true" data-mini="true">按鈕 1</a> <a href="#" data-role="button" data-inline="true" data-mini="true">按鈕 2</a> <div data-role="footer"> <h1>底部文本</h1> </div></div> <script type="text/javascript">//先解除綁定，再綁定$('#btn1').unbind().bind('click', function() {alert('我綁定事件了');});//on直接綁定$('#btn2').on('click', function() {alert('on直接綁定事件了');});//on直接綁定失去焦點的事件$('#btn3').on('blur', function() {alert('on直接綁定失去焦點的事件了');});</script></body></html>看看運行效果：
事件 描述
hashchange 啟用可標記 #hash 曆史，雜湊值會在一次獨立的點擊時發生時變化，比如一個使用者點擊後退按鈕，會通過 hashchange事件進行處理。navigate 包裹了 hashchange 和 popstate 的事件orientationchange 方向改變事件,在使用者垂直或者水平旋轉行動裝置時觸發。pagebeforechange 在頁面切換之前，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換之前的pagebeforechange事件，和切換完成後pagechange（成功）或者pagechangefailed（失敗）。pagebeforecreate 頁面初始化時，初始化之前觸發。pagebeforehide 在頁面切換後舊頁面隱藏之前，觸發的事件。pagebeforeload 在載入請求發出之前觸發pagebeforeshow 在頁面切換後顯示之前，觸發的事件。pagechange 在頁面切換成功後，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換之前的pagebeforechange事件，和切換完成後pagechange（成功）或者pagechangefailed（失敗）。pagechangefailed 在頁面切換失敗時，觸發的事件。使用$.mobile.changePage()來切換頁面，此方法觸發2個事件，切換之前的pagebeforechange事件，和切換完成後pagechange（成功）或者pagechangefailed（失敗）。pagecreate 在頁面建立成功之後，觸發的事件,但增強完成之前。pagehide 在頁面切換後老頁面隱藏之後，觸發的事件。pageinit 在頁面頁面初始化時，觸發的事件。pageload 在頁面完全載入成功後觸發。pageloadfailed 如果頁面請求失敗觸發。pageremove 在視窗視圖從 DOM 中移除外部頁面之前觸發。pageshow 在過渡動畫完成後，在"到達"頁面觸發。scrollstart 當使用者開始滾動頁面時觸發。scrollstop 當使用者停止滾動頁面時觸發。swipe 當使用者在元素上水平滑動時觸發。swipeleft 當使用者從左划過元素超過 30px 時觸發。swiperight 當使用者從右划過元素超過 30px 時觸發。tap 當使用者敲擊某元素時觸發。taphold 當元素敲擊某元素並保持一秒時觸發。throttledresize 啟用可標記 #hash 記錄updatelayout 由動態顯示/隱藏內容的 jQuery Mobile 組件觸發。vclick 虛擬化的 click 事件處理器vmousecancel 虛擬化的 mousecancel 事件處理器vmousedown 虛擬化的 mousedown 事件處理器vmousemove 虛擬化的 mousemove 事件處理器vmouseout 虛擬化的 mouseout 事件處理器vmouseover 虛擬化的 mouseover 事件處理器vmouseup 虛擬化的 mouseup 事件處理器點擊下載學習資料：http://download.csdn.net/download/xmt1139057136/7422831
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
