[轉]使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 事件詳解

在前文《使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 默認配置與事件基礎》中，Kayo 對 jQuery Mobile 事件的基礎做出了一些說明，建議在閱讀本文前首先閱讀前文，這裏 Kayo 再引用前文的重要內容。

「jQuery Mobile 在基於本地事件上，建立了一系列的自定義事件，大部分事件是基於觸摸設備的使用狀況開發的，固然這些事件對於桌面環境也會有適當的處理，開發者可使用 bind() 函數綁定到須要的頁面對象中。

值得注意的是，jQuery Mobile 是基於 Ajax 導航的，因此採用 bind() 方法綁定的事件沒法做用於 Ajax 產生的網頁元素中，所以建議開發者使用動態綁定的方法如 live()、delegate() 將事件動態的綁定到相應的元素中。live()、delegate() 等方法能夠把 jQuery Mobile 選擇器選擇的 DOM 元素，在整個 DOM 範圍將其持久化，這就意味着，不管該元素是先前存在仍是經過 Ajax 動態加載的，事件都會被綁定，如同 CSS 給元素添加樣式同樣。這在對 Ajax 有比較大依賴的網站中是必須注意的。」

在瞭解了 jQuery Mobile 的基本狀況後，下面再詳細介紹 jQuery Mobile 中各個事件的具體狀況。

在 jQuery Mobile 中，能夠把 jQuery Mobile 事件分爲 7 個部分 —— 觸摸事件 (Touch events)，虛擬鼠標事件 (Virtual mouse events)，頁面事件 (Page events)，設備方向變化事件 (Orientation change event)，滾屏事件 (Scroll events)，(Layout events)，動畫事件 (Animation Events)。其中頁面事件能夠再分爲頁面加載事件 (Page load events)，頁面跳轉事件 (Page change events)，頁面顯示/隱藏事件 (Page show/hide events)，頁面初始化事件 (Page initialization events)，頁面移除事件 (Page remove events) 五種，因爲頁面事件較多，而且涉及 jQuery 中較複雜的對象使用，將會另寫文章介紹。下面分別對除頁面事件之外的其餘事件進行詳細介紹。

一.觸摸事件 (Touch events)

• tap(輕擊) 一次快速完整的輕擊後觸發
• taphold（輕擊不放）輕擊不放並維持 750ms (能夠自定義該時間)後觸發
• swipe(划動) 1s (能夠自定義該事件) 內水平拖拽大於 30px ，同時垂直方向向拖曳小於 75px 的事件發生時觸發
• swipeleft（左劃）划動事件爲向左的方向時觸發
• swiperight（右劃）划動事件爲向右的方向時觸發

在上文中，Kayo 介紹過如何改變 jQuery Mobile 的默認配置，其實除了默認配置外，jQuery Mobile 還有其餘一些拓展的配置可供你們自定義，其中就包含一些事件配置。

taphold（輕擊不放）

默認狀況下，taphold 的觸發條件是輕擊（tap）元素超過 750ms ，這個條件是能夠自定義的，方法與自定義默認配置同樣。具體的選項以下：

• $.event.special.tap.tapholdThreshold (默認: 750ms) – 這個值決定了須要輕擊 (tap) 元素超過纔出時間纔會觸發 taphold 事件。

swipe(划動)

默認狀況下，swipe 的觸發條件是在 1s 內水平拖曳大於 30px ，同時垂直方向拖曳小於 75px ，這些也能夠自定義，具體的選項以下：

• $.event.special.swipe.scrollSupressionThreshold (默認: 10px) – 水平拖曳大於這個值時，jQuery Mobile 會抑制頁面滾動。
• $.event.special.swipe.durationThreshold (默認: 1000ms) – 划動時間超過這個值時，此次拖曳不會觸發 swipe 事件。
• $.event.special.swipe.horizontalDistanceThreshold (默認: 30px) – 水平拖曳距離超過這個值時纔會觸發 swipe 事件。
• $.event.special.swipe.verticalDistanceThreshold (默認: 75px) – 垂直拖曳距離小於這個值時纔會觸發 swipe 事件。

注意 jQuery Mobile 中描述寬度、高度、距離使用的單位是 px ，實際使用時默認已經以此爲單位，不用再另外填寫單位，例如：

$.event.special.swipe.horizontalDistanceThreshold = 100;

從上面的觸摸事件中，咱們不難發現，jQuery Mobile 與 jQuery 真的有很大區別，以前 Kayo 曾經介紹過，jQuery Mobile 與 jQuery 相比更像一個 UI 庫，這都是爲了適合快速的移動開發，也能夠說，這都是爲了快速製做 Web Apps ，加上本文所介紹的各類觸摸事件，jQuery Mobile 已經能夠由以上的組件開發出完善的 Web Apps 了，而且若是你已經熟悉 jQuery ，那麼整個開發過程會是更快速的。

二.虛擬鼠標事件 (Virtual mouse events)

Kayo 在本系列的文章中曾經屢次提到，jQuery Mobile 是針對觸摸設備設計的，同時對 PC 等桌面環境也有着良好的支持（固然，對於非觸摸的移動設備也有完善的處理機制），可是對於觸摸設備和桌面環境，鼠標操做有很大的區別 —— 觸摸設備使用的是觸摸輸入代替鼠標輸入，所以，jQuery Mobile 建立了一種事件來整合兩種環境下的事件差別，也就是接下來要介紹的虛擬鼠標事件。

虛擬鼠標事件會保留桌面環境下鼠標操做的一些特性， 例如：vmouseup 總會在 vmousedown 以前被觸發，vmousedown 總會在 vmouseup 以前被觸發，能夠取得事件對象的 pageX, pageY, screenX, screenY, clientX, clientY 等屬性。

• vmouseover 處理觸摸設備下的 touch 或者桌面環境下的 mouseover 的事件
• vmousedown 處理觸摸設備下的 touchstart 或者桌面環境下的 mousedown 的事件
• vmousemove 處理觸摸設備下的 touchmove 或者桌面環境下的 mousemove 的事件
• vmouseup 處理觸摸設備下的 touchend 或者桌面環境下的 mouseup 的事件
• vclick 處理觸摸設備下的 touchend 或者桌面環境下的 click 的事件。在觸摸設備上，這個事件會在 vmouseup 事件以後觸發的。
• vmousecancel 處理觸摸設備下的 touch 或者 桌面環境下的 mousecancel 的事件

特別注意的是，在使用 vclick 時須要謹慎。由於在觸摸設備中使用 vclick 時，Webkit 內核的瀏覽器會在 touchend 事件觸發後生成 mousedown，mouseup 和 click 事件，這些事件的目標對象會在它們被觸發時被計算出來，並且是基於 touch 事件的位置計算出來的，所以在某些狀況下（不一樣的設備，或是不一樣的 OS）可能會致使這個計算結果出現差別，這就意味着實際的點擊的目標和最終的目標可能不一樣。因此，jQuery Mobile 建議開發者在一些容易發生以上狀況（如顯示/隱藏元素，或是屏幕過場等內容被大量改變的狀況）的時候上使用 click 代替 vclick 事件。

三.設備方向變化事件 (Orientation change event)

orientationchange

在 jQuery Mobile 中，最讓 Kayo 驚喜的 API 莫過於設備方向變化事件 orientationchange ，這也是 jQuery Mobile 中惟一一個設備方向變化事件，當設備方向變化（即設備在橫向和縱向的方向間轉變）時，會觸發這個事件，而且這個事件的回調函數的事件對象(e 或 event)中會封裝一個 orientation 屬性，其值爲 "portrait" 或 "landscape" ，用來描述設備是改變爲縱向時觸發事件仍是改變爲橫向時觸發事件。

關於 orientationchange 事件綁定的對象，能夠是在設備方向變化時出現較大影響的其中一個元素，但考慮到大多數元素都沒法準確預測它的變化是否足以觸發 orientationchange 事件，Kayo 建議把 orientationchange 事件綁定到 window 對象中，這樣的綁定最爲穩定有效。例如：

1 2 3 4

$(window).bind( 'orientationchange' , function (e){      if ( e.orientation == "portrait" ) alert( 'portrait' );      if ( e.orientation == "landscape" ) alert( 'landscape' ); });

注意當設備不支持 orientationchange 事件時，jQuery Mobile 會綁定 resize 代替 orientationchange 事件。 resize 事件是 JavaScript 中的原生事件，在 JavaScript 中當頁面窗口改變時會觸發該事件。另外，把 $.mobile.orientationChangeEnabled 設置爲 false 能夠禁止 orientationchange 事件並以 resize 代替。

關於 $.mobile.orientationChangeEnabled ，這裏須要擴展說明一下。orientationchange 事件的觸發時間與客戶端高度、寬度變化的關係在不一樣的瀏覽器中可能會不相同，儘管 jQuery Mobile 會從 window.orientation 中獲取正確的窗口角度賦予給 event.orientation 處理，但鑑於最終的變化規律在瀏覽器間有差別，因此若是觸發該事件的時間對於客戶端高度、寬度變化有很精確的依賴時，開發者能夠設置 $.mobile.orientationChangeEnabled = false 禁止觸發 orientationchange 事件，並在 resize 的回調函數中判斷高度和寬度變化以達到更精確的效果。

四.滾屏事件 (Scroll events)

scrollstart

當頁面開始滾動時觸發 scrollstart 事件。但因爲 IOS 設備會在頁面滾動時凍結 DOM 操做，而且把這些操做加入隊列，當頁面滾動結束時按隊列執行這些 DOM 操做，jQuery Mobile 努力尋找讓設備在頁面滾動開始前執行 DOM 操做，但現階段考慮到最終獲得的 Web Apps 的兼容性，Kayo 不建議利用 scrollstart 的回調函數執行 DOM 操做。

scrollstop

當頁面滾動結束時觸發 scrollstop 事件。

五.佈局事件 (Layout events)

因爲頁面中的一些組件，如可摺疊模塊 (collapsible)，列表組件搜索 (listview search) 或是 jQuery 顯示/隱藏 (show/hide) 等方法，會致使頁面內容大小有較大變化，或者頁面所以產生滾動條，影響頁面佈局，這樣會對一些依賴頁面佈局的組件，如固定的頂部工具欄 (fixed headers) 形成干擾。所以，當出現以上狀況時，jQuery Mobile 會觸發一個事件 updatelayout ，通知其餘組件須要調整它們的佈局以適應頁面變化。爲了確保這個過程順利，也能夠手動觸發這個事件，例如：

1 2 3 4 5 6

$( function () {      $( '#aside' ).hide().trigger( 'updatelayout' );      $(document).bind( "updatelayout" , function (event, ui) {          // 調整組件      }); });

六.動畫事件 (Animation Events)

animationComplete

jQuery Mobile 提供了 animationComplete 事件，在頁面轉場等 jQuery Mobile 動畫結束時觸發。能夠利用該事件，配合增長或刪除一個 class 來作出自定義的過場效果（爲新頁面增長一個 class ，添加自定義的 CSS3 動畫，使用 pagehide 判斷舊頁面已隱藏後再使用 animationComplete 判斷新頁面動畫已結束，而後移除 class），例如：

1 2 3 4 5

$(document).bind( 'pagehide' , function (event, ui) {      $(ui.nextPage).animationComplete( function () {          // 移除相應的 class      }); });

七.事件應用實例

爲了讓你們更好的理解上面的內容，這裏 Kayo 列舉一些 jQuery Mobile 事件應用的實例。

修改配置例子

如上面所說，jQuery Mobile 爲一些 jQuery Mobile 事件的觸發條件提供了靈活的可自定義參數，而自定義的方式與修改 jQuery Mobile 默認配置的方式相同，只是拓展的對象不一樣而已，以下面的例子：

1 2 3 4 5

$(document).bind( 'mobileinit' , function (){      $.event.special.swipe.horizontalDistanceThreshold = 100; // 修改觸發 swipe 事件的最小水平拖曳距離爲 100(px)      $.event.special.swipe.verticalDistanceThreshold = 120; // 修改觸發 swipe 事件的最大垂直拖曳距離爲 120 (px)      $.mobile.orientationChangeEnabled = false ; // 默認禁止觸發 orientationChangeEnabled });

注意不能使用前文中自定義默認配置時利用 jQuery 的 $.extend 擴展 $.event 對象的方法擴展 $.event 對象，只有 $.mobile 可使用 $.extend 擴展對象。所以事件 API 中只有 $.mobile.orientationChangeEnabled 可使用 $.extend 方法進行自定義。

觸摸事件使用例子

下面的例子會使用 live() 爲兩個頁面的 body 元素分別綁定 swiperight 和 swipeleft 事件，這樣在頁面上向右划動和向左划動能夠在兩個頁面之間切換。而且本例子會結合「修改配置例子」的調整，把觸發 swipe 事件的最小水平拖曳距離和觸發 swipe 事件的最大垂直拖曳距離分別修改成 100 和 120 ，讀者能夠嘗試水平划動默認的 30(px) 或垂直方向上滑動超過默認的 75(px) 以檢測修改是否有效。

爲了達到最好的效果，建議在支持觸摸的設備上測試，若使用桌面環境測試，建議在頁面空白地方點擊鼠標划動。另外因爲划動距離已自定義爲較大的值，划動時若沒有效果不妨加大划動距離。

jQurey Mobile 代碼

1 2 3 4 5 6 7 8 9 10 11 12

$(document).bind( 'mobileinit' , function (){      $.event.special.swipe.horizontalDistanceThreshold = 100; // 修改觸發 swipe 事件的最小水平拖曳距離爲 100(px)      $.event.special.swipe.verticalDistanceThreshold = 120; // 修改觸發 swipe 事件的最大垂直拖曳距離爲 120 (px) }); $( function (){      $( "#home" ).live( 'swipeleft' , function () {          $( '#toPage2' ).click(); // 爲首頁綁定向左划動事件      });      $( "#page-2" ).live( 'swiperight' , function () {          $( '#toHome' ).click(); // 爲另外一頁面綁定向右划動事件      }); });

主要 HTML 代碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

< div data-role = "page" id = "home" >        < div data-role = "header" >          < h1 >jQuery Mobile Demo</ h1 >      </ div >        < div data-role = "content" >                        < p >本例子中，爲兩個頁面的 body 元素分別綁定了 swipeleft 和 swiperight ，划動後分別觸發相應的連接，轉到另外一個頁面，另外使用 data-transition="slide" 把頁面過場改成「滑動」效果，從而達到 Apps 中經常使用的滑動換頁效果。</ p >          < a id = "toPage2" href = "#page-2" data-role = "button" data-transition = "slide" data-theme = "b" >向左滑動觸發我這個連接</ a >      </ div >        < div data-role = "footer" >          < h2 >Demo By < a href = "http://kayosite.com" target = "_blank" style = "text-decoration: none; " >Kayo</ a ></ h2 >      </ div > </ div >   < div data-role = "page" id = "page-2" >        < div data-role = "header" >          < h1 >jQuery Mobile Demo</ h1 >      </ div >        < div data-role = "content" >              < a id = "toHome" href = "#home" data-role = "button" data-theme = "b" data-transition = "slide" data-direction = "reverse" data-rel = "back" >向右滑動觸發我這個連接</ a >        </ div >        < div data-role = "footer" >          < h2 >Demo By < a href = "http://kayosite.com" target = "_blank" style = "text-decoration: none; " >Kayo</ a ></ h2 >      </ div >   </ div >

八.完整 Demo

完整 Demo（建議使用 PC 上的 Firefox、Chrome 等現代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統瀏覽器瀏覽）

至於頁面事件，會在下一篇文章中做詳細的介紹。

本文由 Kayo Lee 發表，本文連接：http://kayosite.com/web-app-by-jquery-mobile-and-html5-events-in-detail.html