So wird's gemacht: deklaratives Festlegen von Ereignishandlern

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Hier erfahren Sie, wie Sie Ereignishandler (in Ihrem HTML-Markup) für HTML-Steuerelemente und für Steuerelemente der Windows-Bibliothek für JavaScript deklarativ festlegen.

Wissenswertes

Technologien

Voraussetzungen

Es wird davon ausgegangen, dass Sie eine einfache Windows Store-App mit JavaScript erstellen können, die WinJS-Steuerelemente verwendet. Eine Anleitung zum Einstieg in die Arbeit mit WinJS-Steuerelementen finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Anweisungen

Deklaratives Festlegen eines Ereignishandlers für ein HTML-Steuerelement

In diesem Beispiel wird erläutert, wie ein onclick-Ereignishandler für eine Schaltfläche erstellt wird. Wenn Sie auf die button klicken, aktualisiert der Handler ein div-Ausgabeelement mit den Klickkoordinaten. Wir beginnen mit diesem HTML-Markup.

<!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>

Erstellen Sie den Ereignishandler in der JavaScript-Datei. In diesem Beispiel werden Handler für das onclick-Ereignis einer button erstellt.

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

}

Wenn Sie wie unter Programmieren einfacher Apps beschrieben bewährte Programmiermethoden befolgen, sind alle Elemente in Ihrer JavaScript-Datei privat. Bevor Sie in Ihrem HTML-Code das onclick-Ereignis des Schaltflächen-Steuerelements festlegen, müssen Sie es veröffentlichen. Eine Möglichkeit hierfür ist das Definieren eines Namespace und Hinzufügen Ihres Ereignishandlers als öffentlichen Member.
```
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
```
Legen Sie in Ihrer HTML-Datei den Ereignishandler des Steuerelements auf namespace.member (Ereignis) fest. In diesem Beispiel wird onclick auf startPage.clickEventHandler(event) festgelegt.
```
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>
```

Deklaratives Festlegen eines Ereignishandlers für ein Steuerelement der Windows-Bibliothek für JavaScript

In diesem Beispiel wird erläutert, wie das onchange-Ereignis eines WinJS.UI.Rating-Steuerelements festgelegt wird. Wenn Sie eine Bewertung auswählen, aktualisiert der Handler ein div-Ausgabeelement mit dem neuen Wert der Bewertung. Wir beginnen mit diesem HTML-Markup.

<!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>

Erstellen Sie den Ereignishandler in der JavaScript-Datei. In diesem Beispiel wird ein Handler für das onchange-Ereignis einer Rating erstellt.

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

Hier liegt der Unterschied zwischen dem Festlegen eines Ereignishandlers für ein HTML-Steuerelement und eines Ereignishandlers für ein WinJS-Steuerelement.

WinJS-Steuerelemente können zum Schutz Ihrer App nicht deklarativ auf die Funktionen zugreifen, auch wenn diese öffentlich sind. Sie können WinJS Zugriff auf die Funktion gewähren, indem Sie die WinJS.UI.eventHandler-Methode aufrufen und sie an Ihren Ereignishandler übergeben.
```
WinJS.UI.eventHandler(ratingChanged);
```
WinJS.UI.eventHandler fügt der Funktion eine Eigenschaft namens supportedForProcessing hinzu und legt diese auf "true" fest. Wenn Sie möchten, dass WinJS über HTML auf eine andere Funktion als einen Ereignishandler zugreifen kann, können Sie WinJS.Utilities.markSupportedForProcessing verwenden. Oder Sie fügen der Funktion die supportedForProcessing-Eigenschaft manuell hinzu. Die Funktionen WinJS.UI.eventHandler und WinJS.Utilities.markSupportedForProcessing werden nur der Einfachheit halber bereitgestellt.
Veröffentlichen Sie den Ereignishandler, indem Sie ihn über einen Namespace verfügbar machen.
```
WinJS.Namespace.define("startPage", {
    ratingChangedHandler: ratingChanged
});
```

Legen Sie in Ihrer HTML-Datei den Ereignishandler des Steuerelements auf namespace.member fest. In diesem Beispiel wird onchange auf startPage.ratingChangedHandler festgelegt.

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

Anmerkungen

Weitere Informationen dazu, warum Ereignishandler öffentlich verfügbar gemacht werden müssen, und andere Möglichkeiten zum Registrieren von Ereignishandlern finden Sie unter Programmieren einfacher Apps.