下面我们再打开 index.js ，去看一下这个 app 对象里的东西。

这个文件里定义了一个叫 app 的对象，你可以看到，它里面的东西都放在了一组大括号里面 …

最开始就是在 index.html 里面执行的 initialize …. 它是一个函数，函数在对象里叫做 method ，方法，可以理解成对象的动作。

在这里，它调用了这个对象的另一个动作，bindEvents()，它前面的 this 表示当前这个 app 对象 。

也就是当页面加载以后，会执行 app 的 initialize ，initialize 要做的事情就是去调用 bindEvents() …

在下面定义了 bindEvents() 要做的事情，这里，用了一个 addEventListener() ，绑定了一个 deviceready 事件 … 这个事件会在 phonegap 准备好以后触发执行一次，这样我们就可以安全的去使用 phoneGap 里的东西了 ….

当发生这个事件以后，会调用 onDeviceReady 这个函数 …. onDeviceReady 做的事情在下面已经定义好了，就是去调用 receivedEvent() …

它前面的 app 表示 app 这个对象… 这里我们并没有使用 this 来引用当前这个对象，因为在这里 this 表示的是 deviceready 这个事件 ….

这个函数里传递了一个参数，参数的值是 deviceready …

在下面定义了 receivedEvent … 这允许我们传递一个参数叫 id ….

在它的里面，先定义了一个变量叫 parentElement … 它的值是在页面上找到的包含指定 id 的元素 … 在 onDeviceReady 里，我们调用这个函数的时候，传递的参数值是 deviceready …

所以，在这里，就是找到页面上包含 deviceready 这个 id 的元素 …. 给它起个名字，叫 parentElement ….

第二行，又定义了一个变量，叫 listeningElement …. 它的值是，在 parentElement 里找到的 deviceready 这个 id 下面的 .listening 这个类的元素。

第三行的 receivedElement 的值是 在 parentElement 里找到的 deviceready 这个 id 下面的 .received 这个类的元素 …

然后把 listeningElement 里面找到的那个元素上设置一个 style 属性，属性的值是 display:none ，也就是把元素隐藏起来。

同样在 receivedElement 里面找到的那个元素上设置一个 style 属性，属性的值是 display:block …. 就是把元素显示出来 ….

回到 index.html ，我们再解释一下 receivedEvent ，也就是在 deviceready 这个事件发生以后所做的事情 …

先是找到 deviceready 这个 id 所在的元素 … 再找到它下面的 .listening 这个类，使用 display:none ，把它隐藏起来 …

再找到 received 这个类所在的元素… 使用 display:block ，把它显示出来 ….

最后会在控制台上显示一个 接收到的事件 … 后面加上这个 id 参数 …

模拟器

下面我们可以使用设备的模拟器运行一下这个简单的应用 ….

打开终端 …. 进入到应用所在的目录 … cd desktop/hello …

输入命令 phonegap run ios …. 这样可以先编译应用，然后再把它安装在 ios 模拟器上 ….

完成以后会自动打开这个 HelloWorld 这个应用 …

这个应用上会显示 设备已经准备好了 …. 说明 deviceready 这个事件已经发生了 …

safari

下面我们可以使用本地电脑上的 safari 浏览器的开发者工具查看一下 ….

打开 safari …. 找到 开发 菜单 … 如果没有显示这个菜单，可以先打开 safari - 偏好设置 … 找到 高级 选项卡 …

勾选一下 在菜单栏中显示“开发”菜单 …

然后在 开发 菜单里，找到 iPhone Simulator …. 选择 HelloWorld 下面的 index.html

在这里，你可以看到 … .listening 这个类所在的元素上面，会有一个 display:none …. .received 这个类上，会添加一个 display:block …