PhoneGap API介紹:Events
作者:佚名
本文將介紹PhoneGap API——Events:通過JavaScript截獲本地事件。PhoneGap整個生命周期內(nèi)觸發(fā)的事件。
事件類型:
- 當用戶在Android系統(tǒng)上點擊后退按鈕的時候觸發(fā)此事件。
- document.addEventListener("backbutton", yourCallbackFunction, false);
詳述:
- 如果你需要在Android系統(tǒng)上重載默認后退按鈕的行為,可以通過注冊一個事件監(jiān)聽器來監(jiān)聽“backbutton”事件。它不再需求調(diào)用任何其他方法來重載后退按鈕行為,現(xiàn)在你只需要為“backbutton”事件注冊一個事件監(jiān)聽器。
- 通常情況下,你需要在接收到PhoneGap的“deviceready”事件后,使用document.addEventListener來附加該事件監(jiān)聽器。
支持的平臺:
- Android
簡單的范例:
- document.addEventListener("backbutton", onBackKeyDown, false);
- function onBackKeyDown() {
- // 處理后退按鈕操作
- }
完整的范例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 會觸發(fā)“deviceready”事件
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
- function onDeviceReady() {
- // 注冊回退按鈕事件監(jiān)聽器
- document.addEventListener("backbutton", onBackKeyDown, false);
- }
- // 處理后退按鈕操作
- function onBackKeyDown() {
- }
- </script>
- </head>
- <body>
- </body>
- </html>
- 當PhoneGap被完全加載后會觸發(fā)該事件。
- document.addEventListener("deviceready", yourCallbackFunction, false);
詳述:
- 這是每個PhoneGap應用程序都會用到的重要事件。
- PhoneGap包含兩套代碼庫:本地代碼庫和JavaScript代碼庫。當本地代碼加載時會顯示一個自定義的加載圖片,但是,JavaScript只是在DOM加載后就被加載。這潛在的說明用戶的Web應用程序可以在PhoneGap加載完成之前調(diào)用相應的JavaScript函數(shù)。
- PhoneGap一旦完全加載就會觸發(fā)deviceready事件。當設備觸發(fā)該事件后,用戶就可以安全進行PhoneGap函數(shù)調(diào)用。
- 通常情況下,你會希望在HTML文件的DOM加載完畢后使用document.addEventListener附加一個事件監(jiān)聽器。
支持的平臺:
- Android
- BlackBerry WebWorks (OS 5.0或更高版本)
- iPhone
簡單的范例:
- document.addEventListener("deviceready", onDeviceReady, false);
- function onDeviceReady() {
- // 現(xiàn)在可以安全使用PhoneGap API
- }
完整的范例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 就會觸發(fā)“deviceready”事件。
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法
- function onDeviceReady() {
- // 現(xiàn)在可以安全使用PhoneGap API
- }
- </script>
- </head>
- <body>
- </body>
- </html>
BlackBerry (OS 4.6) 的特異情況:
- RIM的BrowserField(網(wǎng)頁瀏覽器視圖)不支持自定義事件,所以deviceready事件不會被觸發(fā)。
- 一種解決方法是一直手動查詢PhoneGap.available方法直到PhoneGap完全加載完畢。
- function onLoad() {
- // BlackBerry OS 4瀏覽器不支持自定義事件。
- // 因此通過手動方式等待,直到PhoneGap加載完畢。
- var intervalID = window.setInterval(
- function() {
- if (PhoneGap.available) {
- window.clearInterval(intervalID);
- onDeviceReady();
- }
- },
- 500
- );
- }
- function onDeviceReady() {
- // 現(xiàn)在可以安全地調(diào)用PhoneGap API
- }
- 當用戶在Android系統(tǒng)上點擊菜單按鈕的時候觸發(fā)此事件。
- document.addEventListener("menubutton", yourCallbackFunction, false);
詳述:
- 如果你需要在Android系統(tǒng)上重載默認菜單按鈕的行為,可以通過注冊一個事件監(jiān)聽器來監(jiān)聽“menubutton”事件。
- 通常情況下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener來附加該事件監(jiān)聽器。
支持的平臺:
- Android
簡單的范例:
- document.addEventListener("menubutton", onMenuKeyDown, false);
- function onMenuKeyDown() {
- //處理菜單按鈕操作
- }
完整的范例:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 會觸發(fā)“deviceready”事件
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法
- function onDeviceReady() {
- // 注冊菜單按鈕事件監(jiān)聽器
- document.addEventListener("menubutton", onMenuKeyDown, false);
- }
- // 處理菜單按鈕操作
- function onMenuKeyDown() {
- }
- </script>
- </head>
- <body onload="onLoad()">
- </body>
- </html>
- 當PhoneGap應用程序被放到后臺的時候觸發(fā)此事件。
- document.addEventListener("pause", yourCallbackFunction, false);
詳述:
- PhoneGap包含兩套代碼庫:本地代碼庫和JavaScript代碼庫。當本地代碼將應用程序放到后臺的時候會觸發(fā)pause事件。
- 通常情況下,你會希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一個事件監(jiān)聽器。
支持的平臺:
- Android
- BlackBerry WebWorks (OS 5.0或更高版本)
- iPhone
簡單的范例:
- document.addEventListener("pause", onPause, false);
- function onPause() {
- // 處理pause事件
- }
完整的范例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)。
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 就會觸發(fā)“deviceready”事件。
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法
- function onDeviceReady() {
- document.addEventListener("pause", onPause, false);
- }
- // 處理pause事件
- function onPause() {
- }
- </script>
- </head>
- <body>
- </body>
- </html>
iOS的特異情況:
- 在pause事件處理過程中,不但任何通過Objective-C的調(diào)用不會工作,而且任何交互性的調(diào)用也不會工作,比如警示功能。這意味著你不能調(diào)用console.log(及其變種),且任何來自插件或PhoneGap的API的調(diào)用都不會有所反應。這些調(diào)用只有在應用程序恢復后才會被處理(在下一輪運行循環(huán)中處理)。
- 當PhoneGap應用程序被恢復到前臺運行的時候觸發(fā)此事件。
- document.addEventListener("resume", yourCallbackFunction, false);
詳述:
- PhoneGap包含兩套代碼庫:本地代碼庫和JaPhoneGap包含兩套代碼庫:本地代碼庫和JavaScript代碼庫。當本地代碼將應用程序從后臺提取到前臺運行的時候觸發(fā)resume事件。
- 通常情況下,你會希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一個事件監(jiān)聽器。
支持的平臺:
- Android
- BlackBerry WebWorks (OS 5.0或更高版本)
- iPhone
簡單的范例:
- document.addEventListener("resume", onResume, false);
- function onResume() {
- // 處理resume事件
- }
完整的范例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)。
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 就會觸發(fā)“deviceready”事件。
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法。
- function onDeviceReady() {
- document.addEventListener("resume", onResume, false);
- }
- // 處理resume事件
- function onResume() {
- }
- </script>
- </head>
- <body>
- </body>
- </html>
- 當PhoneGap應用程序在線(連接到因特網(wǎng))的時候觸發(fā)此事件。
- document.addEventListener("online", yourCallbackFunction, false);
詳述:
- 當應用程序的網(wǎng)絡連接改變?yōu)閛nline的時候觸發(fā)online事件。
- 通常情況下,你會希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一個事件監(jiān)聽器。
支持的平臺:
- Android
- BlackBerry WebWorks (OS 5.0或更高版本)
- iPhone
簡單的范例:
- document.addEventListener("online", onOnline, false);
- function onOnline() {
- // 處理online事件
- }
完整的范例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)。
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 就會觸發(fā)“deviceready”事件。
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法。
- function onDeviceReady() {
- document.addEventListener("online", onOnline, false);
- }
- // 處理online事件
- function onOnline() {
- }
- </script>
- </head>
- <body>
- </body>
- </html>
iOS的特異情況:
- 在初次啟動的情況下,***個online事件(如果有的話)將需要至少1秒鐘才被觸發(fā)。
- 當PhoneGap應用程序離線(沒有連接到因特網(wǎng))的時候觸發(fā)此事件。
- document.addEventListener("offline", yourCallbackFunction, false);
詳述:
- 當應用程序的網(wǎng)絡連接改變?yōu)閛ffline的時候觸發(fā)offline事件。
- 通常情況下,你會希望一旦接收到PhoneGap的“deviceready”事件就使用document.addEventListener附加一個事件監(jiān)聽器。
支持的平臺:
- Android
- BlackBerry WebWorks (OS 5.0或更高版本)
- iPhone
簡單的范例:
- document.addEventListener("offline", onOffline, false);
- function onOffline() {
- // 處理offline事件
- }
完整的范例:
- <!DOCTYPE html>
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 就會觸發(fā)“deviceready”事件。
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法。
- function onDeviceReady() {
- document.addEventListener("offline", onOffline, false);
- }
- // 處理offline事件
- function onOffline() {
- }
- </script>
- </head>
- <body>
- </body>
- </html>
iOS的特異情況:
- 在初次啟動的情況下,***個offline事件(如果有的話)將需要至少1秒鐘才被觸發(fā)。
- 當用戶在Android系統(tǒng)上點擊搜索按鈕的時候觸發(fā)該事件。
- document.addEventListener("searchbutton", yourCallbackFunction, false);
詳述:
- 如果你需要在Android系統(tǒng)上重載默認搜索按鈕的行為,可以通過注冊一個事件監(jiān)聽器來監(jiān)聽“searchbutton”事件。
- 通常情況下,你需要在接受到PhoneGap的“deviceready”事件后,使用document.addEventListener來附加該事件監(jiān)聽器。
支持的平臺:
- Android
簡單的范例:
- document.addEventListener("searchbutton", onSearchKeyDown, false);
- function onSearchKeyDown() {
- // 處理搜索按鈕操作
- }
完整的范例:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>PhoneGap Device Ready Example</title>
- <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
- <script type="text/javascript" charset="utf-8">
- // 當PhoneGap加載完畢后調(diào)用onDeviceReady回調(diào)函數(shù)。
- // 此時,該文件已加載完畢但phonegap.js還沒有加載完畢。
- // 當PhoneGap加載完畢并開始和本地設備進行通訊,
- // 會觸發(fā)“deviceready”事件。
- document.addEventListener("deviceready", onDeviceReady, false);
- // PhoneGap加載完畢,現(xiàn)在可以安全地調(diào)用PhoneGap方法
- function onDeviceReady() {
- // 注冊搜索按鈕事件監(jiān)聽器
- document.addEventListener("searchbutton", onSearchKeyDown, false);
- }
- // 處理搜索按鈕操作
- function onSearchKeyDown() {
- }
- </script>
- </head>
- <body onload="onLoad()">
- </body>
- </html>
責任編輯:佚名
來源:
PhoneGap中國