增加HTML控件并处理事件

应用程序免不了用到控件，例如按钮，下拉框等。Windows商店应用可以使用两种类型的控件，一类是标准的 HTML 控件，另一种是 WinJS 提供的控件。

把一个 HTML 控件添加到应用中非常简单，和在网页中添加的方式一样，例如：

<button id="button1">An HTML Button</button>

添加控件后还要处理控件事件，否则添加控件的意义不大。针对于 button 我们处理它的 click 事件。我们添加一个元素用于显示用户点击事件的位置信息。

<p id="button1Output"></p>

接下来编写这个事件处理函数：

function button1Click(mouseEvent) {    var button1Output = document.getElementById("button1Output");    button1Output.innerText =    mouseEvent.type    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";}

一切就绪之后，我们需要为这个按钮注册事件，问题是在哪里注册呢？ 这里情况有点复杂，分情况讨论。

1. 如果是把控件添加程序的起始页(default.html)，需要把事件绑定写在 default.js 中。
   

   (function () {    "use strict";    var app = WinJS.Application;    var activation = Windows.ApplicationModel.Activation;    WinJS.strictProcessing();    app.onactivated = function (args) {        if (args.detail.kind === activation.ActivationKind.launch) {            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {                // TODO: This application has been newly launched. Initialize                // your application here.            } else {                // TODO: This application has been reactivated from suspension.                // Restore application state here.            }            args.setPromise(WinJS.UI.processAll().done(function () {                var button1 = document.getElementById("button1");                button1.addEventListener("click", button1Click, false);                })            );        }    };    app.oncheckpoint = function (args) {        // TODO: This application is about to be suspended. Save any state        // that needs to persist across suspensions here. You might use the        // WinJS.Application.sessionState object, which is automatically        // saved and restored across suspension. If you need to complete an        // asynchronous operation before your application is suspended, call        // args.setPromise().    };    // The click event handler for button1    function button1Click(mouseEvent) {        var button1Output = document.getElementById("button1Output");        button1Output.innerText =            mouseEvent.type            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";    }    app.start();})();

   
   
   
2. 如果把空间添加到了 Page 控件中，把事件绑定写到 Page 控件的 ready 函数中。
   

   // home.js(function () {    "use strict";    WinJS.UI.Pages.define("/pages/home/home.html", {        // This function is called whenever a user navigates to this page. It        // populates the page elements with the app's data.        ready: function (element, options) {            // TODO: Initialize the page here.            var button1 = element.querySelector("#button1");            button1.addEventListener("click", this.button1Click, false);        },        button1Click: function(mouseEvent) {            var button1Output = document.getElementById("button1Output");            button1Output.innerText =            mouseEvent.type            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";        }    });})();

   
   
   
3. 如果把控件添加到了自定义的 HTML 文件中，需要手动在 DOMContentLoaded 事件中做处理，在其中调用 WinJS.UI.processAll，然后在 WinJS.UI.processAll 返回的 Promiss 提供的 then 或 done 函数中绑定按钮点击事件。
   

   function outputClick(e) {                var p = document.getElementById("testOutput");                var str = e.type + '(' + e.clientX + ',' + e.clientY + ')';                p.innerText = str;            }            document.addEventListener("DOMContentLoaded", function () {                console.log("DOMContent loaded!");                WinJS.UI.processAll().then(function () {                    var btn = document.getElementById("testButton");                    btn.addEventListener("click", outputClick, false);                });            },false);