Como definir manipuladores de eventos declarativamente

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Saiba como definir manipuladores de eventos declarativamente (na sua marcação HTML) para controles HTML e da Biblioteca do Windows para JavaScript.

O que você precisa saber

Tecnologias

Pré-requisitos

Nós supomos que você possa criar um aplicativo da Windows Store básico em JavaScript que use controles WinJS. Para obter instruções sobre como usar os controles WinJS, veja o Guia de início rápido: adicionando controles e estilos WinJS.

Instruções

Definir um manipulador de eventos em um controle HTML declarativamente

Este exemplo mostra como criar um manipulador de eventos onclick para um botão. Quando você clica em button, o manipulador atualiza um elemento div de saída com as coordenadas do clique. Veja a seguir a marcação HTML que usamos como ponto de partida.

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

No seu arquivo JavaScript, crie seu manipulador de eventos. Este exemplo cria manipuladores para o evento onclick de um button.

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

}

Conforme descrito em Codificando aplicativos básicos, se você estiver seguindo boas práticas de programação, tudo no seu arquivo JavaScript será particular. Antes de poder definir o evento onclick do controle de botão no seu HTML, você precisa torná-lo público. Uma maneira de fazer isso é definir um namespace e adicionar o seu manipulador de eventos como um membro público.
```
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
```
No seu arquivo HTML, defina o manipulador de eventos do controle como namespace.member(evento). Este exemplo define onclick como startPage.clickEventHandler(event).
```
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>
```

Definir um manipulador de eventos em um controle de Biblioteca do Windows para JavaScript declarativamente

Este exemplo mostra como definir o evento onchange de um controle WinJS.UI.Rating. Quando você seleciona uma classificação, o manipulador atualiza um elemento div de saída com o novo valor de classificação. Veja a seguir a marcação HTML que usamos como ponto de partida.

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

No seu arquivo JavaScript, crie seu manipulador de eventos. Este exemplo cria um manipulador para o evento onchange de um Rating.

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

É aqui que existe uma diferença entre definir um manipulador de eventos para um controle HTML e para um controle WinJS.

Para proteger seu aplicativo, os controles WinJS não podem acessar suas funções de modo declarativo, mesmo sendo públicos. Você pode permitir acesso ao WinJS para a sua função chamando o método WinJS.UI.eventHandler e transmitindo-o ao manipulador de eventos.
```
WinJS.UI.eventHandler(ratingChanged);
```
WinJS.UI.eventHandler adiciona uma propriedade à função chamada supportedForProcessing e a define como "true". Para que uma função, que não seja um manipulador de eventos, fique acessível ao WinJS por HTML, você pode usar WinJS.Utilities.markSupportedForProcessing. Você também pode simplesmente adicionar a propriedade supportedForProcessing à sua função manualmente; as funções WinJS.UI.eventHandler e WinJS.Utilities.markSupportedForProcessing são fornecidas apenas para conveniência.

Torne seu manipulador de eventos público expondo-o em um namespace.

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

No seu arquivo HTML, defina o manipulador de eventos do controle como namespace.member. Este exemplo define onchange como startPage.ratingChangedHandler.

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

Comentários

Para saber mais sobre por que você deve expor manipuladores de eventos publicamente, e para conhecer outras maneiras de registrar manipuladores de eventos, veja Codificando aplicativos básicos.

Tópicos relacionados

Adicionando e aplicando estilo a controles

Codificando aplicativos básicos

Compartilhar via