快速入门：添加 HTML 控件和处理事件 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

每个应用都需要控件，例如按钮、 复选框和下拉列表。 使用 JavaScript 的 Windows 运行时应用可以使用两种类型的控件：固有 HTML 控件和 Windows JavaScript 库控件。固有 HTML 控件是指属于 HTML 标准的控件（如按钮和复选框）。

在这里，我们将重点介绍如何创建和使用 HTML 控件。下一主题快速入门：添加 WinJS 控件和样式介绍如何创建和使用 WinJS 控件。

（仅限 Windows）请将此操作功能视为我们的应用功能大全系列的一部分。: 用户交互：触摸输入和更多方式以及 Windows 应用商店应用 UI 详细信息。

先决条件

• 我们假设你可以创建使用 JavaScript 的基本 Windows 运行时应用，该应用使用 WinJS 模板。有关创建你的第一个应用的帮助，请参阅创建你的第一个使用 JavaScript 的 Windows 运行时应用。

什么是控件？

在许多应用编程模型中，都需要一个用来显示内容或与内容进行交互的控件。由于大多数 HTML 元素都能够显示内容和响应各种事件，因此，对于使用 JavaScript 的 Windows 运行时应用来说，控件和元素之间的区别不总是十分明显。我们将主要目的是提供交互性的元素和对象称为控件。 有关属于此类别的元素和对象的列表，请参阅按功能列出控件。

添加 HTML 控件

在使用 JavaScript 的 Windows 运行时应用中，你可以使用任何 HTML 控件。

添加 HTML 控件

• 若要添加 HTML 控件，只需将控件的 HTML 添加到你的页面，正如在典型的网页上一样。本示例创建一个 button：

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

  通常，最好为控件分配一个 ID 或类名，以便你可以方便地检索和操作它。在以后介绍如何附加事件时，将使用按钮的 ID 查找相应的按钮。

控件的 HTML 不总是像按钮的 HTML 那样简单。例如，若要创建一个 slider 控件，可以使用 input 输入元素：

<input type="range" />

有关可用 HTML 控件和用来创建它们的标记的列表，请参阅控件列表。

处理事件

每个控件都提供允许你响应用户操作的事件。例如，按钮控件提供在用户单击按钮时将引发的 click 事件。你可以创建一个称为事件处理程序的函数来处理该事件，然后向该控件注册此事件处理程序。

注册事件处理程序有两种方法：一种方法是在 HTML 中添加事件处理程序：将控件的事件属性设置为 JavaScript 事件处理程序函数或 JavaScript 语句的名称。有关此方法的说明，请参阅如何以声明方式设置事件处理程序。

添加事件处理程序的另一种方法是以编程方式添加它。

以编程方式注册事件处理程序

1. 创建控件并为其分配一个 ID。本示例创建一个按钮并为其提供 ID "button1"。

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

2. （仅在此示例中）创建一个段落元素并为其分配 ID "button1Output"。你将使用它来显示有关该按钮的 click 事件的信息。

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

3. 在 JavaScript 代码中，定义一个事件处理程序。大多数事件处理程序都仅使用一个参数，即包含事件信息的 Event 对象。其他事件则可能返回其他类型的包含相应事件特定信息的事件信息对象。

   click 事件会提供一个 MouseEvent 对象，该对象包含有关该事件的信息，如按下了哪个鼠标按钮以及哪个对象引发了该事件。 此示例会创建一个 click 事件处理程序，该处理程序使用 MouseEvent 对象来获取用户所单击的点的 x 和 y 坐标。

   （click 事件也会响应触摸交互和键盘交互。本主题中的示例假设用户使用鼠标进行单击。有关通过触摸和其他方式进行交互的详细信息，请参阅响应用户交互。）

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

4. 现在，需要检索你的控件并调用 addEventListener 来向该控件附加事件。问题是，应该在何时检索控件呢？你可以把它添加到 JavaScript 代码中的任何位置，但它有可能会在控件存在之前被调用。

   • 如果要将控件添加到应用的起始页（由 default.html 和 default.js 定义）中，请使用 WinJS.UI.processAll 函数注册事件处理程序。 每个 Microsoft Visual Studio 模板都创建一个 default.js 文件，该文件调用 activated 事件处理程序中的 WinJS.UI.processAll。 由于 WinJS.UI.processAll 方法是异步方法，因此它将返回一个 Promise。若要附加事件处理程序，请为 WinJS.UI.processAll 所返回的 Promise 提供一个 then 或 done 函数，并使用该函数附加事件处理程序。（有关承诺的详细信息，请参阅使用 JavaScript 异步编程。）

     以下示例使用 WinJS.UI.processAll 附加按钮的事件处理程序。

     (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();
     })();
     

     有关 WinJS.UI.processAll 方法的详细信息，请参阅快速入门：添加 WinJS 控件和样式。

   • 如果要将控件添加到 Page 控件中，请使用 Page 控件的 ready 函数附加事件处理程序（并且使用 querySelector 而不是 document.getElementById，如下所示）。

     WinJS Page 控件提供了一种将内容分成模块化可重用单元的方法。你的应用中可能会自动包含一个或多个 Page 控件，具体取决于在创建应用时所使用的 Visual Studio 模板。

     在创建 Page 控件时，它会自动包括一个 ready 函数，使用该函数可以为按钮添加事件处理程序。以下示例显示了为按钮添加 click 事件处理程序的 Page 控件的完整 JavaScript 代码。

     
     // home.js
     (function () {
         "use strict";
     
         WinJS.UI.Pages.define("/pages/home/home.html", {
             ready: function (element, options) { // Fires when the user navigates to home.html
                 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 + ")";
             }
         });
     })();
     

     在上一示例中，this 引用由 WinJS.UI.Pages.define 调用创建的页面对象。此外，button1Click: function(mouseEvent) {...} 将为上述页面对象创建属性（它是一个匿名函数）。因此，this.button1Click（在 button1.addEventListener("click", this.button1Click, false) 中）确实引用了 button1Click 函数：

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

     有关 Page 控件的详细信息，请参阅添加 Page 控件。

   • 如果要将控件添加到你自己的自定义 HTML 和 JavaScript 文件中，请处理 DOMContentLoadedDOMContentLoaded 事件并用它来调用 WinJS.UI.processAll。你可以在代码中的任何位置注册 DOMContentLoaded 事件，因为在你的代码执行之前，document 对象已经存在。为 WinJS.UI.processAll 所返回的 Promise 提供 then 或 done 函数，并使用该函数附加事件处理程序。

当你运行该应用并单击此按钮时，它将显示单击点的坐标。

备注

不要使用 JavaScript URI

不要在事件处理程序中使用 JavaScript URI，因为你的应用将不执行它们。例如，如果你尝试这样做，则当你单击该按钮时，什么也不会发生。

<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

此限制适用于应用的本地上下文中的代码（应用包中所包括的代码），而不适用于由应用访问的外部网页上的代码。

使用窗体

在传统的 HTML 网站中，控件和其他输入元素通常包含在 form 元素中。form 元素用来将数据传递到服务器。由于典型应用的大多数编程都是基于客户端的，因此，你通常不需要使用 form 元素。

使用透明层

一种常见的做法是使用全屏透明层（例如空 div 元素）检测某些用户交互或显示动画。但是，使用透明层覆盖 HTML 控件可能会让它对用户交互的响应变慢。若要保持你的 HTML 控件快速响应，请不要在它们上面放置透明层。

摘要和后续步骤

你学习了如何创建 HTML 控件以及如何附加事件处理程序。

接下来，你将阅读快速入门：添加 WinJS 控件和样式，以了解如何使用为使用 JavaScript 的 Windows 运行时应用提供的新 WinJS 控件。

若要了解有关特定控件的更多信息，请参阅控件列表。

示例

• 基本控件示例

  显示许多 HTML 和 WinJS 控件的示例。

相关主题

为基本应用编写代码

快速入门：添加 WinJS 控件和样式

控件列表