windows8中的事件处理

这是javascript创建的空白应用程序中的默认js文件(default.js)内容：

复制代码
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: 此应用程序刚刚启动。在此处初始化
                //您的应用程序。
            } else {
                // TODO: 此应用程序已从挂起状态重新激活。
                // 在此处恢复应用程序状态。
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: 即将挂起此应用程序。在此处保存
        //需要在挂起中保留的任何状态。您可以使用
        // WinJS.Application.sessionState 对象，该对象将在
        //挂起中自动保存和恢复。如果您需要在
        //挂起应用程序之前完成异步操作，请调用
        // args.setPromise()。
    };

    app.start();
})();
复制代码

这段代码中的"use strict"代表的是开启严格模式，严格模式为代码提供了额外的错误检查。

有两个事件，代表的是应用的生命周期，每个应用都有它的应用生命周期：

 

 onactivated事件表示的正在运行或者激活，这个事件里面是用来注册我们的事件处理程序，就是把初始化的内容和添加事件都写在这里面。

oncheckpoint事件表示的已挂起，这个事件里面就是处理即将挂起应用时会调用的程序。

处理函数写在default.js 中的 app.oncheckpoint 事件处理程序之后、对 app.start 的调用之前。

下面通过一个小例子来学习如何进行事件处理：

我想要实现的效果很简单，就是在文本输入框中输入我的姓名，当我点击按钮的时候，把我的名字显示出来。

首先是html部分的内容：

在default.html页面的body部分加：

<body>
    请输入您的姓名：<input type="text" id="userName" /><input type="button" value="按钮" id="btn" />
    <div id="con">这里显示您的姓名</div>
</body>

现在就是给应用添加事件了，按照应用生命周期的原则：我们把事件绑定写在onactivated里面，这里再说一下，

args.setPromise(WinJS.UI.processAll());

这行代码的意思是初始化应用中的所有控件，我们现在没用到控件，不删留着它就行，添加事件后的代码：

复制代码
app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: 此应用程序刚刚启动。在此处初始化
                //您的应用程序。
            } else {
                // TODO: 此应用程序已从挂起状态重新激活。
                // 在此处恢复应用程序状态。
            }
            args.setPromise(WinJS.UI.processAll());
            var btn = document.getElementById("btn");//获取按钮
            btn.addEventListener("click", btnHendler, false);//为按钮添加处理函数
        }
};
复制代码

在onactivated事件里面为按钮注册事件后，就是写处理函数了，按照应用生命周期原则，应该把处理函数写在app.oncheckpoint 事件处理程序之后、对 app.start 的调用之前：

function btnHendler() {//事件处理函数
        var userName = document.getElementById("userName").value;//获取文本框里的文本
        document.getElementById("con").innerText = userName;//把文本框里的内容添加到con(名字显示区域)里面
}

最后贴出修改后的完整default.js文件：

复制代码
(function () {
    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: 此应用程序刚刚启动。在此处初始化
                //您的应用程序。
            } else {
                // TODO: 此应用程序已从挂起状态重新激活。
                // 在此处恢复应用程序状态。
            }
            args.setPromise(WinJS.UI.processAll());
            var btn = document.getElementById("btn");//获取按钮
            btn.addEventListener("click", btnHendler, false);//为按钮添加处理函数
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: 即将挂起此应用程序。在此处保存
        //需要在挂起中保留的任何状态。您可以使用
        // WinJS.Application.sessionState 对象，该对象将在
        //挂起中自动保存和恢复。如果您需要在
        //挂起应用程序之前完成异步操作，请调用
        // args.setPromise()。
    };
    function btnHendler() {//事件处理函数
        var userName = document.getElementById("userName").value;//获取文本框里的文本
        document.getElementById("con").innerText = userName;//把文本框里的内容添加到con(名字显示区域)里面
    }
    app.start();
})();
复制代码

到这里对事件处理的介绍就结束了，在用javascript开发windows8  metro应用中，代码解析因为用的是ie10的内核，所以ie10的事件在应用开发也是一样可以使用的，在ie10中新增加了很多的事件和手势，大家如果有兴趣可以查阅我的另一篇关于ie10事件的文章。

posted @   唐菜也  阅读(262)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae