如何以声明方式设置事件处理程序

  • 项目

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

本主题介绍如何（在 HTML 标记中）为 HTML 和适用于 JavaScript 的 Windows 库控件以声明方式设置事件处理程序。

你需要了解的内容

技术

先决条件

说明

在 HTML 控件上以声明方式设置事件处理程序

下面的示例展示如何为按钮创建 onclick 事件处理程序。当你单击 button 时，该处理程序会用单击坐标更新输出 div 元素。下面是作为起点的 HTML 标记。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CodingBasicApps</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- CodingBasicApps references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    
    <button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
    <div id="button1Output">&nbsp;</div>
</body>
</html>

  1. 在 JavaScript 文件中，创建事件处理程序。下面的示例为 button 的 onclick 事件创建处理程序。

    // The click event handler for button1
function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
        mouseEvent.type
        + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}

  2. 如为基本应用编写代码中所述，如果你遵循良好的编程做法，则 JavaScript 文件中的所有内容都将是专用的。必须将该文件设置为公开，才能在 HTML 中设置按钮控件的 onclick 事件。实现此目的的一种方法就是定义一个命名空间并将你的事件处理程序添加为公共成员。

    WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });

  3. 在 HTML 文件中，将控件的事件处理程序设置为 namespace.member(event)。下面的示例将 onclick 设置为 startPage.clickEventHandler(event)。

    <button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>

在适用于 JavaScript 的 Windows 库控件上以声明方式设置事件处理程序

下面的示例展示如何设置 WinJS.UI.Rating 控件的 onchange 事件。当你选择某个分级时，该处理程序会用新的评级值更新输出 div 元素。下面是作为起点的 HTML 标记。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>DeclaringWinJSEventsInMarkup</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <!-- DeclaringWinJSEventsInMarkup references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div style="margin:50px">
        <div id="ratingControlHost" 
            data-win-control="WinJS.UI.Rating">
        </div>
        <div id="ratingOutputDiv">&nbsp;</div>
    </div>
</body>
</html>

  1. 在 JavaScript 文件中，创建事件处理程序。下面的示例为 Rating 的 onchange 事件创建处理程序。

    function ratingChanged(eventInfo) {
    var ratingOutputDiv = document.getElementById("ratingOutputDiv");
    ratingOutputDiv.innerText = eventInfo.detail.tentativeRating;
}

  2. 下面介绍为 HTML 控件设置事件处理程序和为 WinJS 控件设置事件处理程序之间的区别。

    为了保护你的应用，WinJS 控件不能以声明方式访问你的函数，即使这些函数是公开函数也是如此。你可以通过调用 WinJS.UI.eventHandler 方法并将你的事件处理程序传递给它来为 WinJS 授予对你的函数的访问权限。

    WinJS.UI.eventHandler(ratingChanged);

    WinJS.UI.eventHandler 为名为 supportedForProcessing 的函数添加一个属性并将它设置为 "true"。如果你希望事件处理程序以外的函数可通过 HTML 供 WinJS 控件访问，则可以使用 WinJS.Utilities.markSupportedForProcessing。你还可以只需向你的函数中手动添加 supportedForProcessing 属性；之所以提供 WinJS.UI.eventHandler 和 WinJS.Utilities.markSupportedForProcessing 函数，是为了方便使用。

  3. 可以通过命名空间将事件处理程序公开。

    WinJS.Namespace.define("startPage", {
    ratingChangedHandler: ratingChanged
});

  4. 在 HTML 文件中，将控件的事件处理程序设置为 namespace.member。下面的示例将 onchange 设置为 startPage.ratingChangedHandler。

    <div id="ratingControlHost" 
    data-win-control="WinJS.UI.Rating" 
    data-win-options="{onchange: startPage.ratingChangedHandler}">
</div>
<div id="ratingOutputDiv">&nbsp;</div>

备注

有关为何必须公开事件处理程序的详细信息，以及用来注册事件处理程序的其他方法，请参阅为基本应用编写代码。

相关主题

添加控件和设置控件样式

为基本应用编写代码