向页面中添加的控件可分为两种类型：标准的HTML控件和WinJS库控件。其中标准的HTML控件是指HTML标准中定义的基本控件，如按钮和复选框；WinJS库控件是为开发基于JavaScript 的Windows应用商店应用提供的新控件，如ListView、HtmlControl和PageControl等。下面首先介绍如何添加这两种类型的控件，然后介绍如何为控件注册事件处理函数和设计控件的样式。
（1）添加标准的HTML控件
向页面中添加标准的HTML控件可以通过定义相应的HTML元素来实现。例如要在某个页面中添加一个按钮，就可以在这个页面的body元素内定义一个button元素，HTML代码片段如下所示：
<button id="SaveButton"></button>
在上面的代码中，为按钮的id属性赋予了属性值SaveButton，用于唯一标识这个控件。
（2）添加WinJS库控件
WinJS库为开发JavaScript 的Windows应用商店应用提供了一些新控件，如Rating、ListView、HtmlControl、PageControl和FlipView控件等，这些控件统称为WinJS库控件。添加一个WinJS库控件与添加标准的HTML控件不同，WinJS库控件没有专用的HTML元素，在一个页面中无法通过定义ListView元素来添加一个ListView控件。
向页面中添加一个WinJS库控件有两种方式，HTML方式和JavaScript方式。HTML方式指的是定义一个标准的HTML元素，并将data-win-control属性设置为WinJS库控件类型来添加控件。例如，要在某个页面中添加一个Rating控件，可以在这个页面的body元素内定义一个div元素，然后将div元素的data-win-control属性设置成"WinJS.UI.Rating"，相应的HTML代码片段如下所示：
<body>
<div data-win-control="WinJS.UI.Rating"></div>
</body>
而JavaScript方式是在JavaScript代码中通过实例化WinJS库对象来添加控件，例如在某个页面中添加一个Rating控件，可以首先通过id属性获得一个标准HTML控件的元素对象，然后以这个元素对象为参数调用Rating构造函数，以下JavaScript代码片段获得id属性为RatingHost的元素对象，并以该元素对象为参数实例化一个Rating控件：
var ratingHost = document.getElementById("RatingHost");
var ratingControl = new WinJS.UI.Rating(ratingHost);
与添加一个控件相对应，设置一个控件的属性也有HTML和JavaScript两种方式。对于HTML方式，可以使用标准HTML控件的data-win-options属性来设置。例如，向某个页面中添加一个Rating控件，设置maxRating属性的值为5，averageRating属性的值为3，相应的HTML代码片段为：
<div id="RatingControlHost" data-win-control="WinJS.UI.Rating" data-win-options="{maxRating: 5, averageRating: 3}"></div>
对于JavaScript方式，设置一个控件属性的方法是直接为控件对象的属性赋值，例如上面的ratingControl对象，设置它的disabled属性值为true，相应的JavaScript代码片段如下所示：
ratingControl.disabled = true;
（3）为控件注册事件处理函数
为页面中的控件注册事件处理函数一般在JavaScript代码中使用addEventListener函数来实现。addEventListener函数有三个参数，分别是type、listener和useCapture。type参数指定触发的事件类型，listener代表type事件的处理函数，第三个参数useCapture为bool类型，当值为true时事件处理函数在type事件的捕获阶段执行，当值为false时事件处理函数在type事件的冒泡阶段执行。
这里简要介绍一下JavaScript的事件机制，元素事件的触发分为三个阶段：捕获阶段、目标阶段和冒泡阶段。当用户触发一个元素的某事件时，系统会从HTML文档的根元素到目标元素由外向内，检测每个元素是否注册了此事件的处理函数，如果已经注册并且useCapture 为true，则调用该事件处理函数，这是事件的捕获阶段。事件的目标阶段是指系统调用在目标元素本身注册的事件处理函数，这里的目标元素指用户与之交互的元素，比如用户点击一个div元素，那么此div元素就是目标元素。在冒泡阶段，系统从目标元素到根元素由内向外，检测每个元素是否注册了此事件的处理函数，如果注册了并且 useCapture为false，则调用该事件处理函数。
例如在一个id属性值为FirstDiv的div元素内依次嵌套了id属性值为SecondDiv、ThirdDiv、ForthDiv的div元素，当用户触发id属性值为ForthDiv的div元素的事件时，在捕获阶段系统将检测最外层的div元素，即id属性值为firstDiv的div元素是否注册了useCapture参数为 true 的事件处理函数，若注册了该事件处理函数就执行，然后再依次检测id属性值为SecondDiv和ThirdDiv的元素。在目标阶段系统会触发id属性为ForthDiv的元素的事件处理函数，不论在添加ForthDiv元素的事件处理函数时useCapture参数是true还是false。在冒泡阶段系统将依次检测id属性值为ThirdDiv、SecondDiv、FirstDiv的元素，如果其中某个元素注册了useCapture参数为false的事件处理函数，那么执行该处理函数。
addEventListener函数的语法格式代码如下所示：
object.addEventListener(type, listener, useCapture);
下面以一个应用程序为例，介绍如何使用addEventListener函数为页面中标准的HTML控件注册事件处理函数。在这个应用程序运行时，单击应用中的按钮，会在界面中显示一段文本。
新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为AddListener。在default.html页面中添加一个div元素和一个按钮，代码片段如下所示：
<body>
<div id="PromptMessageDiv"></div>
<button id="ShowMessageButton">点击这里</button>
</body>
接下来打开default.js文件，在处理应用激活事件的函数中添加代码，为"点击这里"按钮注册单击事件处理函数ShowMessageButton_Click。代码片段如下所示：
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
} else {
}
args.setPromise(WinJS.UI.processAll());
var showMessageButton = document.getElementById("ShowMessageButton");
showMessageButton.addEventListener("click", ShowMessageButton_Click);
}
};
在上面的代码中，首先调用document对象的getElementById函数获得id属性值为ShowMessageButton的元素对象，并赋值给showMessageButton变量，接着通过showMessageButton变量调用元素对象的addEventListener函数为按钮注册单击事件处理函数ShowMessageButton_Click。
下面编写ShowMessageButton_Click函数的代码，实现当单击"点击这里"按钮时，在界面中显示一段文本。代码片段如下所示：
function ShowMessageButton_Click() {
var promptMessage = document.getElementById("PromptMessageDiv");
promptMessage.innerHTML = "您已经点击了按钮";
}
在上面的代码中，调用document对象的getElementById函数获得id属性值为PromptMessageDiv的元素对象，并赋值给promptMessage变量，接着设置promptMessage的innerHTML属性值为"您已经点击了按钮"。
启动调试，界面上显示"点击这里"按钮，单击这个按钮，界面中就会显示文本"您已经点击了按钮"。如图19-4所示：
图19-4运行效果图
对于WinJS库控件，为这类控件注册事件处理函数与标准HTML控件类似，只不过查找控件的函数稍有不同，例如查找一个id为"ShowMessageButton"的按钮，相应的JavaScript代码为：
document.getElementById("ShowMessageButton");
而查找一个id为"listViewID"的ListView控件，相应的JavaScript代码为：
document.getElementById("listViewID").winControl;
（4）为控件添加样式
为控件添加样式可以改变控件的外观，例如可以设置控件的大小、位置和控件中文本的字体颜色等。在为控件添加样式时，可以使用WinJS库样式，也可以使用自定义的样式。WinJS库样式是一组预定义的样式，使用WinJS库样式需要将控件的class属性设置为相应样式的名称。下面以一个简单的应用程序为例，介绍如何使用WinJS库中的样式和如何为控件自定义样式，在这个应用程序中包含两个按钮，一个按钮使用WinJS库中的win-backbutton样式，形状是一个向左的箭头，另一个按钮使用自定义样式，在样式定义中设置文本颜色为红色。
新建一个JavaScript的Windows应用商店的空白应用程序项目，将其命名为AddStyle。在default.html页面中添加两个按钮，分别设置这两个按钮的class属性，代码片段如下所示：
<body>
<button class="win-backbutton"></button>
<br />
<button class="buttonStyle">按钮 </button>
</body>
在上面的代码中，为两个按钮设置了class属性值，分别为win-backbutton和buttonStyle，其中win-backbutton是WinJS库中定义的样式，buttonStyle为自定义样式名称。
接下来打开default.css文件，在其中添加代码定义buttonStyle样式，将元素中文本的颜色改为红色。代码片段如下所示：
.buttonStyle {
color:red;
}
启动调试，界面上显示两个按钮，一个按钮形状是向左的箭头，另一个按钮的文本颜色为红色，如图19-5所示：
图19-5 运行效果图