增加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);