Cómo establecer controladores de eventos de manera declarativa

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Obtén información acerca de cómo establecer controladores de eventos de manera declarativa (en tu marcado HTML) para controles HTML y de la biblioteca de Windows para JavaScript.

Lo que debes saber

Tecnologías

Requisitos previos

Damos por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript que usa controles de WinJS. Para obtener instrucciones sobre cómo empezar a usar controles de WinJS, consulta Inicio rápido: Agregar controles y estilos de WinJS.

Instrucciones

Establecer un controlador de eventos en un control HTML de manera declarativa

En este ejemplo se muestra cómo crear un controlador de eventos onclick para un botón. Cuando haces clic en el button, el controlador actualiza un elemento div de salida con las coordenadas de clic. Aquí se muestra el marcado HTML con el que comenzaremos.

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

En el archivo JavaScript, crea un controlador de eventos. En este ejemplo se crean controladores para el evento onclick de un button.

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

}

Como se describe en Codificar aplicaciones básicas, si sigues los procedimientos recomendados de programación, todo el contenido de tu archivo JavaScript será privado. Antes de poder establecer el evento onclick del control del botón en HTML, debes hacerlo público. Una manera de hacerlo es definir un espacio de nombres y agregar el controlador de eventos como un miembro público.
```
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
```
En tu archivo HTML, establece el controlador de eventos del control en namespace.member(event). En este ejemplo, onclick se establece en startPage.clickEventHandler(event).
```
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>
```

Establecer un controlador de evento en un control de la biblioteca de Windows para JavaScript de manera declarativa

En este ejemplo se muestra cómo establecer el evento onchange de un control WinJS.UI.Rating. Cuando seleccionas una clasificación, el controlador actualiza un elemento div de salida con el nuevo valor de clasificación. Aquí se muestra el marcado HTML con el que comenzaremos.

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

En el archivo JavaScript, crea un controlador de eventos. En este ejemplo se crea un controlador para el evento onchange de un Rating.

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

Esta es la diferencia entre establecer un controlador de eventos para un control HTML y para un control de WinJS.

Para proteger la aplicación, los controles de WinJS no pueden acceder a las funciones mediante declaración, aunque sean públicas. Para conceder acceso a WinJS a tu función, debes llamar al método WinJS.UI.eventHandler y pasarle tu controlador de eventos.
```
WinJS.UI.eventHandler(ratingChanged);
```
WinJS.UI.eventHandler agrega una propiedad a tu función denominada supportedForProcessing y la establece en "true". Si quieres que WinJS tenga acceso mediante HTML a otra función aparte de a un controlador de eventos, puedes usar WinJS.Utilities.markSupportedForProcessing. También puedes agregar manualmente la propiedad supportedForProcessing a tu función; las funciones WinJS.UI.eventHandler y WinJS.Utilities.markSupportedForProcessing están para proporcionar una mayor comodidad.
Haz tu controlador de eventos público exponiéndolo a través de un espacio de nombres.
```
WinJS.Namespace.define("startPage", {
    ratingChangedHandler: ratingChanged
});
```

En tu archivo HTML, establece el controlador de eventos del control en namespace.member. En este ejemplo, onchange se establece en startPage.ratingChangedHandler.

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

Observaciones

Para obtener más información acerca de por qué tienes que exponer los controladores de eventos públicamente y para conocer otras maneras de registrar controladores de eventos, consulta Codificar aplicaciones básicas.

Temas relacionados

Agregar controles y aplicar estilos

Codificar aplicaciones básicas

Compartir a través de