Come impostare gestori eventi in modo dichiarativo

Articolo
03/04/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Scopri come impostare gestori di eventi in modo dichiarativo (nel markup HTML) per i controlli HTML e della libreria Windows per JavaScript.

Cosa sapere

Tecnologie

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Store scritta in JavaScript che usi controlli WinJS. Per istruzioni di base sui controlli WinJS, vedi Guida introduttiva: Aggiunta di controlli e stili WinJS.

Istruzioni

Imposta un gestore di eventi in un controllo HTML in modo dichiarativo

Questo esempio ti mostra come creare un gestore dell'evento onclick per un pulsante. Quando fai clic sul button, il gestore aggiorna un elemento div di output con le coordinate del clic. Ecco il markup HTML da cui partiamo.

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

Crea il gestore eventi nel file JavaScript. In questo esempio vengono creati handle per l'evento onclick di un button.

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

}

Come descritto in Codifica delle app di base, se ti stai attenendo a una buona tecnica di programmazione tutti gli elementi del tuo file JavaScript saranno privati. Per poter impostare l'evento onclick del controllo pulsante nell'HTML, devi innanzitutto renderlo pubblico. Un modo per farlo consiste nel definire uno spazio dei nomi e aggiungervi il gestore dell'evento come membro pubblico.
```
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
```
Imposta nel file HTML il gestore dell'evento del controllo su namespace.member(evento). In questo esempio onclick viene impostato su startPage.clickEventHandler(event).
```
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>
```

Imposta un gestore eventi in un controllo della libreria Windows per JavaScript in modo dichiarativo

Questo esempio illustra come impostare l'evento onchange di un controllo WinJS.UI.Rating. Quando selezioni una classificazione, il gestore aggiorna un elemento div di output con il nuovo valore di classificazione. Ecco il markup HTML da cui partiamo.

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

Crea il gestore eventi nel file JavaScript. in questo esempio viene creato un gestore per l'evento onchange di un elemento Rating.

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

In questo caso esiste una differenza tra l'impostazione di un gestore eventi per un controllo HTML e per un controllo WinJS.

Per proteggere l'app, i controlli WinJS non possono accedere alle funzioni in modo dichiarativo, neanche se sono pubbliche. Puoi autorizzare WinJS ad accedere alle funzioni chiamando il metodo WinJS.UI.eventHandler e passandolo al gestore eventi.
```
WinJS.UI.eventHandler(ratingChanged);
```
WinJS.UI.eventHandler aggiunge alla funzione una proprietà denominata supportedForProcessing e la imposta su "true". Se vuoi rendere accessibile a WinJS una funzione diversa dal gestore eventi mediante HTML, puoi usare WinJS.Utilities.markSupportedForProcessing. Puoi anche semplicemente aggiungere manualmente la proprietà supportedForProcessing alla funzione: le funzioni WinJS.UI.eventHandler e WinJS.Utilities.markSupportedForProcessing sono fornite solo per maggiore praticità.

Rendi pubblico il gestore eventi esponendolo tramite uno spazio dei nomi.

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

Imposta nel file HTML il gestore dell'evento del controllo su namespace.member. In questo esempio onchange viene impostato su startPage.ratingChangedHandler.

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

Osservazioni

Per altre informazioni sui motivi per cui devi esporre i gestori eventi pubblicamente e sugli altri modi di registrarli, vedi Codifica delle app di base.

Argomenti correlati

Aggiunta di controlli e relativi stili

Codifica delle app di base

Condividi tramite