cordova 事件

最新推荐文章于 2024-06-16 23:29:54 发布

原创最新推荐文章于 2024-06-16 23:29:54 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cordova #event #事件 #webapp

cordova 专栏收录该内容

21 篇文章

订阅专栏

简介

有了cordova 应用程序所使用的各种事件，应用程序代码可以为这些事件添加侦听器。例如:

HTML File

<!DOCTYPE html><html>
    <head>
    <title>Device Ready Example</title>
 
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="example.js"></script>
    </head>
    <body onload="onLoad()">
    </body></html>

JS File

// example.js file
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
    document.addEventListener("pause", onPause, false);
    document.addEventListener("resume", onResume, false);
    document.addEventListener("menubutton", onMenuKeyDown, false);
// Add similar listeners for other events
}
function onPause() {
// Handle the pause event
}
function onResume() {
// Handle the resume event
}
function onMenuKeyDown() {
// Handle the menubutton event
}
// Add similar event handlers for other events

注意：应用程序通常应该使用document.addEventListener附加一个事件监听器deviceready

支持的平台

下表列出了cordova 事件和支持的平台：

deviceready

当cordova被完全加载时会触发deviceready事件，这是每个cordova应用程序都会用到的重要事件。

cordova包含两套代码库：本地代码库和javaScript代码库。当本地代码加载时会显示一个自定义的加载图片，但是javaScript只是在DOM加载后才会被加载。这潜在的说明用户的WEB应用程序可以在cordova加载完成之前调用相应的javaScript函数。cordova一旦完全加载就会触发deviceready事件。待设备触发改事件后，用户就可以安全地进行cordova函数调用了。

在通常情况下，用户会希望在HTML文件的DOM加载完毕后使用document.addEventListener附加一个事件监听器。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

// Now safe to use device APIs

}

pause

当cordova应用程序被放在后台的时候触发pause事件。

前面讲过，cordova包含两套代码库：本地代码库和javaScript代码库。当本地代码将应用程序放到后台的时候，会触发pause事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("pause", onPause, false);

}

function onPause() {

// Handle the pause event

}

resume

当cordova应用程序恢复到前台运行的时候触发resume事件。

当本地代码将应用程序从后台提取到前台运行的时候将会触发resume事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("resume", onResume, false);

}

function onResume() {

// Handle the resume event

}

backbutton

当用户在android系统上单击“后退”按钮的时候触发backbutton事件。

如果需要在android系统上重载默认“后退”按钮的行为，可以通过注册一个事件监听器来监听backbutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("backbutton", onBackKeyDown, false);

}

function onBackKeyDown() {

// Handle the back button

}

menubutton

当用虎在android系统上单击“菜单”按钮的时候触发menubutton事件。

如果需要在android系统上重载默认“菜单”按钮的行为，可以通过注册一个事件监听器来监听menubutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("menubutton", onMenuKeyDown, false);

}

function onMenuKeyDown() {

// Handle the back button

}

searchbutton

当用户在android系统上单击“搜索”按钮的时候触发searchbutton事件。

如果需要在android系统上重载默认“搜索”按钮的行为，可以通过注册一个事件监听器来监听searchbutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("searchbutton", onSearchKeyDown, false);

}

function onSearchKeyDown() {

// Handle the search button

}

startcallbutton

当用户按下“通话”按钮时会触发startcallbutton事件。

如果需要重写默认的通话行为，可以注册一个监听器用来监听startcallbutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("startcallbutton", onStartCallKeyDown, false);

}

function onStartCallKeyDown() {

// Handle the start call button

}

endcallbutton

当用户按下“挂机”按钮时会触发endcallbutton事件。

如果需要重写默认的挂机行为，可以注册一个监听器用来监听endcallbutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("endcallbutton", onEndCallKeyDown, false);

}

function onEndCallKeyDown() {

// Handle the end call button

}

volumedownbutton

当用户单击“减小音量”按钮时会触发volumedownbutton事件

如果需要重写默认的减小音量行为，可以注册一个监听器用来监听volumedownbutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);

}

function onVolumeDownKeyDown() {

// Handle the volume down button

}

volumeupbutton

当用户单击“加大音量”按钮时会触发volumeupbutton事件。

如果需要重写默认的加大音量行为，可以注册一个监听器用来监听volumeupbutton事件。

Quick Example

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);

}

function onVolumeUpKeyDown() {

// Handle the volume up button

}