jQuery Mobile：文件就緒或頁面事件：哪個更適合處理頁面載入？

jQuery Mobile：文件就緒與頁面事件

了解差異

在 jQuery Mobile中，有兩種​​主要方法可以在頁面執行時執行程式碼已載入：

1. 文件就緒($(document).ready())：當DOM 載入並且所有元素可用時觸發此事件。但是，在 jQuery Mobile 中，此事件有時可能在使用 Ajax 載入和操作頁面之前執行得太早。
2. 頁面事件($('.selector').on('pageinit/pagebeforeshow' ))：這些事件是專門為jQuery Mobile 設計的，在頁面初始化時或顯示之前觸發。它們確保僅在加載特定頁面時執行程式碼。

為什麼頁面事件更好：

• 它們確保程式碼被執行僅當目標頁面載入且可見時。
• 它們提供了一種更可預測且一致的方式來處理頁面

頁面事件轉換順序

在jQuery Mobile 中從一個頁面轉換到另一個頁面時，將按以下順序觸發一系列頁面事件：

1. 頁面B：建立前的頁面
2. 頁面B：建立頁面
3. 頁面B: pageinit
4. 頁面A: pagebeforehide
5. 頁A: pageremove
6. 頁A: pagehide
7. 頁B: pagebeforeshow
8. 頁面B：頁面顯示

資料操作和參數傳遞

將資料從一個頁面傳送到另一個頁面：

• 使用帶有data 和dataUrl 選項的$.mobile.changePage() 將參數傳遞給新頁面。
• 在目標頁面中，使用 $(document).data() 或$(document).data("url") 取得查詢字串。

存取上一頁的資料：

• 儲存全域變數中的資料或使用 sessionStorage 物件。
• 從新的共享位置檢索資料

防止多個事件綁定

要防止在頁面之間導航時在同一元素上綁定多個事件：

• 使用頁面事件而不是文件準備好了。
• 使用事件過濾器（例如：Event(!click)）來確保僅綁定事件一次。
• 在事件處理程序中使用 e.handled = true 來防止重新觸發。

以上是jQuery Mobile：文件就緒或頁面事件：哪個更適合處理頁面載入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！