Декларативное задание обработчиков событий

Статья
03/04/2016

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

Узнайте, как декларативно задать обработчики событий (в вашей разметке HTML) для элементов управления HTML и библиотеки Windows для JavaScript.

Что необходимо знать

Технологии

Необходимые условия

Предполагается, что вы умеете создавать простые приложения Магазина Windows на JavaScript, в которых используются элементы управления WinJS. Указания по началу работы с элементами управления WinJS см. в статье Краткое руководство. Добавление элементов управления и стилей WinJS.

Инструкции

Задайте обработчик событий на элементе управления HTML декларативным образом

В этом примере показано, как создать обработчик события onclick для кнопки. Когда вы щелкаете button, обработчик обновляет выходной элемент div координатами щелчка. Вот разметка HTML, с которой мы начнем.

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

Создайте свой обработчик событий в файле JavaScript. В этом примере создается обработчик для события onclick элемента управления button.

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

}

Как описано в статье Создание простых приложений, если вы следуете рекомендациям по программированию, все в вашем файле JavaScript будет частным. Прежде чем вы сможете настроить событие onclick элемента управления "кнопка" в своем HTML, вы должны сделать его общим. Один из способов сделать это — определить пространство имен и добавить ваш обработчик событий как общий.
```
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
```
В вашем файле HTML настройте обработчик событий на namespace.member(событие). В этом примере событие onclick настраивается для обработчика событий startPage.clickEventHandler(event).
```
<button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>
```

Задайте обработчик событий для элемента управления из библиотеки Windows для JavaScript декларативно

В этом примере показано, как настроить событие onchange элемента управления WinJS.UI.Rating. Когда вы выбираете оценку, обработчик обновляет выходной элемент div новым значением оценки. Вот разметка HTML, с которой мы начнем.

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

Создайте свой обработчик событий в файле JavaScript. В этом примере создается обработчик для события onchange элемента управления Rating.
```
function ratingChanged(eventInfo) {
    var ratingOutputDiv = document.getElementById("ratingOutputDiv");
    ratingOutputDiv.innerText = eventInfo.detail.tentativeRating;
}
```
.
Вот в чем разница между настройкой обработчиков событий для элемента управления HTML и для элемента управления WinJS.

Для защиты вашего приложения элементы управления WinJS не могут декларативно обращаться к вашим функциям, даже если они общие. Вы можете предоставить WinJS доступ к своей функции, вызвав метод WinJS.UI.eventHandler и передав ему ваш обработчик событий.
```
WinJS.UI.eventHandler(ratingChanged);
```
WinJS.UI.eventHandler добавляет к вашей функции свойство с именем supportedForProcessing и устанавливает для него значение "true". Если вам нужно предоставить WinJS доступ к другой функции в HTML, кроме обработчика событий, вы можете воспользоваться методом WinJS.Utilities.markSupportedForProcessing. Вы также можете просто добавить свойство supportedForProcessing к вашей функции вручную. Функции WinJS.UI.eventHandler и WinJS.Utilities.markSupportedForProcessing предоставляются просто для удобства.
Сделайте ваш обработчик событий общим, сделав его видимым в пространстве имен.
```
WinJS.Namespace.define("startPage", {
    ratingChangedHandler: ratingChanged
});
```
В вашем файле HTML настройте обработчик событий на namespace.member. В этом примере событие onchange настраивается для обработчика событий startPage.ratingChangedHandler.
```
<div id="ratingControlHost" 
    data-win-control="WinJS.UI.Rating" 
    data-win-options="{onchange: startPage.ratingChangedHandler}">
</div>
<div id="ratingOutputDiv">&nbsp;</div>
```

Примечания

Подробнее о том, почему необходимо объявлять обработчики событий как общие, а также о других способах регистрации обработчиков событий см. в статье Создание простых приложений.

Связанные разделы

Добавление и стилизация элементов управления

Создание простых приложений

Поделиться через