如何以宣告方式設定事件處理常式

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何以宣告方式 (在 HTML 標記中) 設定 HTML 與適用於 JavaScript 之 Windows Library 控制項的事件處理常式。

您必須知道的事

技術

先決條件

我們假設您可以利用 JavaScript，以 WinJS 控制項建立基本的 Windows 市集應用程式。如需如何開始使用 WinJS 控制項的指示，請參閱快速入門：新增 WinJS 控制項與樣式。

指示

以宣告方式設定 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>

在您的 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 + ")";

}

如撰寫基本應用程式的程式碼中所述，如果您按部就班進行程式設計，您 JavaScript 檔案中的所有內容將全為私人內容。您必須先讓它變為公用，才能夠在 HTML 中設定按鈕控制項的 onclick 事件。要這麼做的一種方式為定義命名空間，然後將事件處理常式新增為公用成員。
```
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
```
在您的 HTML 檔案中，將控制項的事件處理常式設為 namespace.member(事件)。本範例會將 onclick 設為 startPage.clickEventHandler(event)。
```
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>
```

以宣告方式設定 JavaScript 適用之 Windows Library 控制項的事件處理常式

本範例顯示如何設定 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>

在您的 JavaScript 檔案中，建立您的事件處理常式。本範例會建立 Rating 之 onchange 事件的處理常式。

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

以下為設定 HTML 控制項之事件處理常式與設定 WinJS 控制項的事件處理常式之間的差異。

為保護您的應用程式，WinJS 控制項無法以宣告方式存取您的函式，即使是公用函式也一樣。您可以呼叫 WinJS.UI.eventHandler 方法並將它傳送至事件處理常式，授與 WinJS 控制項存取函式的權限。
```
WinJS.UI.eventHandler(ratingChanged);
```
WinJS.UI.eventHandler 會新增屬性至名為 supportedForProcessing 的函式，並將它設為 "true"。如果您想讓 WinJS 可透過 HTML 存取事件處理常式以外的函式，可以使用 WinJS.Utilities.markSupportedForProcessing。您也可以手動將 supportedForProcessing 屬性加到函式；WinJS.UI.eventHandler 與 WinJS.Utilities.markSupportedForProcessing 函式只是為了便利性而設。

透過命名空間公開，將您的事件處理常式設為公用。

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

在您的 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>

備註

如需為何必須公開事件處理常式及以其他方式登錄事件處理常式的詳細資訊，請參閱撰寫基本應用程式的程式碼。

如何以宣告方式設定事件處理常式

您必須知道的事

技術

先決條件

指示

以宣告方式設定 HTML 控制項的事件處理常式

以宣告方式設定 JavaScript 適用之 Windows Library 控制項的事件處理常式

備註

相關主題

其他資源