Como definir manipuladores de eventos declarativamente

Applies to Windows and Windows Phone

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

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>

  1. 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 + ")";
    
    }
    
    
    
  2. 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 });
    
    
    
  3. 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>

  1. 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;
    }
    
    
    
  2. É 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.

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

    
    WinJS.Namespace.define("startPage", {
        ratingChangedHandler: ratingChanged
    });
    
    
    
  4. 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

 

 

Mostrar:
© 2014 Microsoft