Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen (HTML)

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 ]

Jede App benötigt Steuerelemente, beispielsweise Schaltflächen, Kontrollkästchen und Dropdownlisten. Windows-Runtime-Apps mit JavaScript können zwei Arten von Steuerelementen nutzen: systeminterne HTML-Steuerelemente und Steuerelemente der Windows-Bibliothek für JavaScript. Bei systeminternen HTML-Steuerelementen handelt es sich um Steuerelemente wie Schaltflächen und Kontrollkästchen, die Bestandteil des HTML-Standards sind.

Der Schwerpunkt dieses Themas liegt auf dem Erstellen und Verwenden von HTML-Steuerelementen. Im nächsten Thema, Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen, wird beschrieben, wie WinJS-Steuerelemente erstellt und verwendet werden.

(Nur Windows) In unserer Serie App-Features von A bis Z sehen Sie dieses Feature in Aktion.: Benutzerinteraktion: Toucheingabe... und vieles mehr und Windows Store-App-Benutzeroberfläche von A bis Z.

Voraussetzungen

Es wird vorausgesetzt, dass Sie eine einfache Windows-Runtime-App mit JavaScript erstellen können, die WinJS-Steuerelemente verwendet. Informationen zum Erstellen Ihrer ersten App finden Sie unter Erstellen Ihrer ersten Windows-Runtime-App mit JavaScript.

Was ist ein Steuerelement?

In vielen Modellen der Anwendungsprogrammierung benötigen Sie Steuerelemente zum Anzeigen von oder Interagieren mit Inhalten. Da die meisten HTML-Elemente in der Lage sind, Inhalte anzuzeigen und auf vielfältige Ereignisse zu reagieren, ist die Unterscheidung zwischen einem Steuerelement und einem Element bei Windows-Runtime-Apps mit JavaScript nicht immer leicht. Wir beziehen uns auf Elemente und Objekte, die in erster Linie als Steuerelemente fungieren und Interaktionen ermöglichen. Eine Liste der Elemente und Objekte, die dieser Kategorie zugerechnet werden können, finden Sie unter Steuerelemente nach Funktion.

Hinzufügen eines HTML-Steuerelements

In Ihrer Windows-Runtime-App mit JavaScript können Sie beliebige HTML-Steuerelemente verwenden.

Hh465402.wedge(de-de,WIN.10).gif So fügen Sie ein HTML-Steuerelement hinzu

Zum Hinzufügen eines HTML-Steuerelements fügen Sie der Seite einfach wie bei einer normalen Webseite den HTML-Inhalt des Steuerelements hinzu. In diesem Beispiel wird ein button-Element erstellt:
```
<button id="button1">An HTML Button</button>
```
Es empfiehlt sich generell, dem Steuerelement eine ID oder einen Klassennamen zuzuweisen, sodass Sie es auf einfache Weise abrufen und bearbeiten können. Später, wenn das Anfügen von Ereignissen erläutert wird, suchen Sie die Schaltfläche anhand ihrer ID.

Das HTML für ein Steuerelement ist nicht immer so unkompliziert, wie dies bei einer Schaltfläche der Fall ist. Wenn Sie beispielsweise ein slider-Steuerelement erstellen, verwenden Sie das input-Eingabeelement:

<input type="range" />

Eine Liste der verfügbaren HTML-Steuerelemente und des Markups, mit dessen Hilfe sie erstellt werden, finden Sie in der Liste der Steuerelemente.

Behandeln von Ereignissen

Jedes Steuerelement stellt Ereignisse bereit, mit denen auf Aktionen des Benutzers reagiert werden kann. Das Schaltflächen-Steuerelement stellt z. B. ein click-Ereignis bereit, das ausgelöst wird, wenn ein Benutzer auf die Schaltfläche klickt. Sie erstellen eine Funktion zum Behandeln des Ereignisses (diese wird als Ereignishandler bezeichnet). Anschließend registrieren Sie den Ereignishandler für das Steuerelement.

Es gibt zwei Möglichkeiten, einen Ereignishandler zu registrieren. Eine Möglichkeit besteht darin, einen Ereignishandler im HTML-Element hinzuzufügen. Dazu legen Sie das event-Attribut des Steuerelements auf den Namen einer JavaScript-Ereignishandlerfunktion oder eine JavaScript-Anweisung fest. Anweisungen zu dieser Methode finden Sie unter So wird's gemacht: deklaratives Festlegen von Ereignishandlern.

Außerdem ist es möglich, einen Ereignishandler programmgesteuert hinzuzufügen.

Hh465402.wedge(de-de,WIN.10).gif So registrieren Sie einen Ereignishandler programmgesteuert

Erstellen Sie das Steuerelement, und weisen Sie ihm eine ID zu. In diesem Beispiel wird eine Schaltfläche erstellt, der die ID "button1" zugewiesen wird.
```
<button id="button1">An HTML button</button>
```
Erstellen Sie speziell für dieses Beispiel ein Absatzelement, und weisen Sie diesem die ID "button1Output" zu. Damit werden Informationen zum Click-Ereignis der Schaltfläche angezeigt.
```
<p id="button1Output"></p>
```
Definieren Sie im JavaScript-Code einen Ereignishandler. Die meisten Ereignishandler empfangen ein einzelnes Argument, ein Event-Objekt, das Informationen zum Ereignis enthält. Andere Ereignisse geben möglicherweise andere Typen von Ereignisinformationsobjekten zurück, die spezifische Informationen für das Ereignis enthalten.

Das click-Ereignis stellt ein MouseEvent-Objekt bereit, das Informationen zum Ereignis enthält, z. B. welche Maustaste gedrückt wurde und von welchem Objekt das Ereignis ausgelöst wurde. In diesem Beispiel wird ein click-Ereignishandler erstellt, der die X- und Y-Koordinaten des Punkts, auf den der Benutzer geklickt hat, mit dem MouseEvent-Objekt abruft.

(Das click-Ereignis reagiert auch auf Finger- und Tastatureingaben. In den Beispielen in diesem Thema wird davon ausgegangen, dass der Benutzer mit einer Maus klickt. Weitere Informationen zur Interaktion mit Fingereingaben und anderen Geräten finden Sie unter Reaktion auf Benutzerinteraktionen.)
```
function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}
```
Nun müssen Sie das Ereignis an das Steuerelement anfügen, indem Sie es abrufen und addEventListener aufrufen. Die Frage ist, wann Sie das Steuerelement abrufen sollten? Sie könnten es einfach an einer beliebigen Stelle im JavaScript-Code hinzufügen, dann bestünde allerdings die Möglichkeit, dass das Steuerelement aufgerufen wird, bevor es überhaupt vorhanden ist.
- Wenn Sie das Steuerelement auf der Startseite Ihrer App hinzufügen (definiert durch "default.html" und "default.js"), registrieren Sie Ihre Ereignishandler mit der WinJS.UI.processAll-Funktion. Jede Vorlage von Microsoft Visual Studio erstellt eine Datei "default.js", die WinJS.UI.processAll im activated-Ereignishandler aufruft. Da es sich um eine asynchrone Methode handelt, gibt die WinJS.UI.processAll-Methode eine Promise zurück. Geben Sie zum Anfügen Ihrer Ereignishandler eine then-Funktion oder eine done-Funktion für die Promise an, die von WinJS.UI.processAll zurückgegeben wurde, und fügen Sie die Ereignishandler mithilfe dieser Funktion an. (Weitere Informationen zu Zusagen finden Sie unter Asynchrone Programmierung in JavaScript.)
  
  Dieses Beispiel verwendet WinJS.UI.processAll zum Anfügen des Ereignishandlers für die Schaltfläche.
```
(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();
})();
```
  Weitere Informationen zur WinJS.UI.processAll-Methode finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
- Zum Hinzufügen Ihres Steuerelements zu einem -Seitensteuerelement verwenden Sie die ready-Funktion des Seitensteuerelements, um Ihre Ereignishandler hinzuzufügen (und, wie nachfolgend dargestellt, querySelector anstelle von document.getElementById zu verwenden).
  
  Das WinJS-Steuerelement Page bietet eine Möglichkeit, Ihren Inhalt in modulare, wiederverwendbare Einheiten zu unterteilen. Ihre App könnte z. B. automatisch eines oder mehrere Page-Steuerelemente enthalten – je nachdem, mit welcher Vorlage aus Visual Studio Sie sie erstellt haben.
  
  Wenn Sie ein Page-Steuerelement erstellen, wird automatisch eine ready-Funktion eingefügt, mit der Sie einen Ereignishandler für Ihre Schaltfläche hinzufügen können. Dieses Beispiel zeigt den vollständigen JavaScript-Code für ein Page-Steuerelement, das einer Schaltfläche einen click-Ereignishandler hinzufügt.
```
// 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 + ")";
        }
    });
})();
```
  Das vorherige Beispiel this bezieht sich auf das durch den WinJS.UI.Pages.define-Aufruf erstellte Seitenobjekt. Darüber hinaus erstellt button1Click: function(mouseEvent) {...} eine Eigenschaft (eine anonyme Funktion) für das genannte Seitenobjekt. Aus diesem Grund bezieht sich this.button1Click (in button1.addEventListener("click", this.button1Click, false)) auf die Funktion button1Click:
```
button1Click: function(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
}
```
  Weitere Informationen zu Page-Steuerelementen finden Sie unter Hinzufügen von Page-Steuerelementen.
- Wenn Sie das Steuerelement Ihrem eigenen, benutzerdefinierten HTML-Element und den JavaScript-Dateien hinzufügen, behandeln Sie das DOMContentLoaded-Ereignis, und rufen Sie damit WinJS.UI.processAll auf. Sie können die Registrierung für das DOMContentLoaded-Ereignis an beliebiger Stelle im Code vornehmen, da das document-Objekt zum Zeitpunkt der Ausführung des Codes bereits vorhanden ist. Geben Sie eine then-Funktion oder eine done-Funktion für die Promise an, die von WinJS.UI.processAll zurückgegeben wurde, und fügen Sie die Ereignishandler mithilfe dieser Funktion an.

Wenn Sie die App ausführen und auf die Schaltfläche klicken, werden die Koordinaten des Punkts angezeigt, auf den geklickt wurde.

Anmerkungen

Keine JavaScript-URIs verwenden

Verwenden Sie in Ihren Ereignishandlern keine JavaScript-URIs, da diese von der App nicht ausgeführt werden. Wenn Sie dies versuchen, wird bei einem Klick auf die Schaltfläche keine Aktion ausgeführt:


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

Diese Einschränkung gilt für Code im lokalen Kontext der App (Code, der im App-Paket enthalten ist). Sie gilt jedoch nicht für Code auf externen Webseiten, auf welche Ihre App zugreift.

Verwenden von Formularen

Auf einer herkömmlichen HTML-Website sind Steuerelemente und andere Eingabeelemente normalerweise in einem form-Element enthalten. Mithilfe von form-Elementen werden Daten an den Server übergeben. Da der Großteil der Programmierung für eine typische App clientbasiert ist, müssen Sie i. d. R. kein form-Element verwenden.

Verwenden transparenter Ebenen

Um bestimmte Benutzerinteraktionen zu erkennen oder Animationen anzuzeigen, wird üblicherweise eine transparente Vollbildebene verwendet, beispielsweise ein leeres div-Element. Eine transparente Ebene über einem HTML-Steuerelement kann jedoch dazu führen, dass dieses nicht mehr optimal auf Benutzerinteraktionen reagiert. Um die Reaktionsfähigkeit von HTML-Steuerelementen zu gewährleisten, sollten Sie daher keine transparente Ebene darüberlegen.

Zusammenfassung und nächste Schritte

Sie haben sich damit vertraut gemacht, wie HTML-Steuerelemente erstellt und Ereignishandler angefügt werden.

Im nächsten Schritt erfahren Sie, wie Sie die neuen WinJS-Steuerelemente verwenden, die für Windows-Runtime-Apps mit JavaScript bereitgestellt wurden. Lesen Sie dazu das Thema Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.

Weitere Informationen zu bestimmten Steuerelementen finden Sie in der Liste der Steuerelemente.

Beispiele

Beispiel für einfache Steuerelemente

Hier finden Sie Beispiele für viele HTML- und WinJS-Steuerelemente.