Cordova 框架中第一個(gè)應(yīng)該掌握的就是這個(gè) deviceready 事件。采用 Cordova 開(kāi)發(fā)的應(yīng)用在運(yùn)行的時(shí)候，Cordova 提供的通過(guò) HTML5調(diào)用 Native 功能并不是立即就能使用的，Cordova 框架在讀入 HTML5代碼之后，要進(jìn)行 HTML5和 Native 建立橋接，在未能完成這個(gè)橋接的初始的情況下，是不能調(diào)用 Native 功能的。在 Cordova 框架中，當(dāng)這個(gè)橋接的初始化完成后，會(huì)調(diào)用他自身特有的事件，即 deviceready 事件。

所以首先應(yīng)該在 HTML 中注冊(cè) deviceready 的事件監(jiān)聽(tīng)，在它的 CallBack 函數(shù)中再去使用 Cordova 的功能。

Js 代碼

document.addEventListener('deviceready', function () {
  console.log('Device is Ready!');
  // ....your code
}, false);

需要注意的是，deviceready 事件是在每回讀入 HTML 的時(shí)候都會(huì)被調(diào)用，而不只是應(yīng)用啟動(dòng)時(shí)調(diào)用。

除了 deviceready 事件以外，Cordova 應(yīng)用在內(nèi)部讀取 HTML 代碼的時(shí)候還會(huì)調(diào)用一些其他的事件。但這些并不是 Cordova 框架提供的事件，而是嵌入的 Webview 的瀏覽器 Render 引擎提供的。

DOMContentLoaded 事件

頁(yè)面的 DOM 內(nèi)容加載完成后即觸發(fā),而無(wú)需等待其他資源（CSS、JS）的加載。

load 事件

在 DOMContentLoaded 事件之后，其他資源加載完成后觸發(fā)。

所以，其實(shí)調(diào)用的順序是：DOMContentLoaded -> load -> deviceready deviceready 事件一定是在 load 事件之后，所以 load 事件的執(zhí)行速度會(huì)影響到 deviceready 事件的調(diào)用。把一些不必要的資源可以在 deviceready 事件之后調(diào)用從而提高執(zhí)行速度。

Js 代碼

document.addEventListener('DOMContentLoaded', function () {
  console.log('DOMContentLoaded OK!');
}, false);

window.addEventListener('load', function () {
  console.log('load OK!');
}, false);

document.addEventListener('deviceready', function () {
  console.log('deviceready OK!');
}, false);

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/4.1.png" alt="picture4.1" />

需要注意的是，在 Cordova 的 app 中如果 js 執(zhí)行失敗，前臺(tái)不會(huì)有任何提示（后臺(tái)會(huì)出 log），所以很多時(shí)候點(diǎn)擊都沒(méi)有任何反應(yīng)，那說(shuō)明 JS 執(zhí)行出錯(cuò)了，把以下代碼加到 index.html 中，當(dāng)應(yīng)用發(fā)生 JS 錯(cuò)誤的時(shí)候，會(huì)調(diào)用 window 的 onerror 方法從而顯示錯(cuò)誤信息，從而捕獲 JavaScript 的 Error 提示用戶(hù)。

Js 代碼

window.onerror = function(msg, url, line) {
   var idx = url.lastIndexOf("/");
   if(idx > -1) {
    url = url.substring(idx+1);
   }
   alert("ERROR in " + url + " (line #" + line + "): " + msg);
   return false;
};

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/4.2.png" alt="picture4.2" />