Краткое руководство: добавление элементов управления HTML и обработка событий (HTML)

Статья
03/04/2016

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

Всем приложениям нужны элементы управления — например, кнопки, флажки и раскрывающиеся списки. Приложения среды выполнения Windows на JavaScript могут использовать два типа элементов управления: встроенные элементы управления HTML и элементы управления библиотеки Windows для JavaScript. Встроенные элементы управления HTML — это элементы управления (например, кнопки и флажки), которые являются частью стандарта HTML.

В этом разделе рассматривается создание и использование элементов управления HTML. Создание и использование элементов управления WinJS описывается в следующем разделе: Краткое руководство. Добавление элементов управления и стилей WinJS.

(Только Windows) Посмотрите, как работает эта функция в действии в качестве части нашей серии Компоненты приложений от А до Я: Взаимодействие с пользователем: сенсорный ввод... и сверх того и Пользовательский интерфейс приложения Магазина Windows от начала до конца.

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

Предполагается, что вы умеете создавать простые приложения среды выполнения Windows на JavaScript с использованием шаблонов WinJS. Дополнительную информацию о создании первого приложения см. в разделе Создание первого приложения среды выполнения Windows на JavaScript.

Что такое элемент управления?

В большинстве моделей программирования элемент управления используется для отображения содержимого и взаимодействия с ним. Поскольку большинство элементов HTML могут отображать содержимое и реагировать на различные события, для приложений среды выполнения Windows на JavaScript различие между элементом управления и обычным элементом не всегда очевидно. К элементам управления относятся элементы и объекты, которые в основном предназначены для обеспечения взаимодействия. Список элементов и объектов, попадающих в эту категорию, см. в разделе Элементы управления по функциям.

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

В приложении среды выполнения Windows на JavaScript вы можете использовать любые элементы управления HTML.

Hh465402.wedge(ru-ru,WIN.10).gif Чтобы добавить элемент управления HTML:

Чтобы добавить элемент управления HTML, просто вставьте HTML-код на страницу, как если бы это была обычная веб-страница. В этом примере создается button:
```
<button id="button1">An HTML Button</button>
```
Обычно бывает полезно назначить элементу управления идентификатор или имя класса, чтобы элемент было проще извлекать и использовать. Позднее, когда мы покажем, как привязывать события, у вас будет возможность найти кнопку по ее идентификатору.

HTML-код элемента управления не всегда очевиден, как в случае с кнопкой. Например, чтобы создать элемент управления slider, необходимо использовать элемент ввода input:

<input type="range" />

Список доступных элементов управления HTML и разметку, необходимую для их создания, см. в разделе Список элементов управления.

Обработка событий

Любой элемент управления предоставляет события для обработки действий пользователя. Например, элемент управления "Кнопка" предоставляет событие click, которое вызывается при нажатии кнопки мыши пользователем. Чтобы обработать событие, необходимо создать функцию, называемую обработчиком событий, и затем зарегистрировать ее в элементе управления.

Существует два метода регистрации обработчика событий. Первый метод заключается в добавлении обработчика событий в HTML-код. Для этого необходимо присвоить атрибуту события элемента управления имя функции обработчика событий JavaScript или оператора JavaScript. Инструкции по этому подходу см. в разделе Декларативное задание обработчиков событий.

Второй метод добавления обработчика заключается в использовании программных средств.

Hh465402.wedge(ru-ru,WIN.10).gif Регистрация обработчика событий программными средствами

Создайте элемент управления и присвойте ему идентификатор. В этом примере создается кнопка с идентификатором "button1".
```
<button id="button1">An HTML button</button>
```
Только для этого примера создайте элемент абзаца и назначьте идентификатор "button1Output". Вы будете использовать его для отображения данных о событии нажатия кнопки.
```
<p id="button1Output"></p>
```
В своем коде JavaScript определите обработчик событий. Большая часть обработчиков событий принимает единственный аргумент — объект Event, который содержит сведения о событии. Другие события могут возвращать другие типы объектов со сведениями о событиях, определенными для этих событий.

Событие click создает объект MouseEvent, содержащий сведения о событии, — например, какая была нажата кнопка мыши и какой объект инициализировал событие. В примере создается обработчик события click, который использует объект MouseEvent для получения координат X и Y области нажатия.

(Событие click реагирует на касание и нажатие клавиш клавиатуры. В примере предполагается, что пользователь нажимает кнопку мышью. Подробнее о взаимодействии с касаниями и различными устройствами см. в разделе Реагирование на действия пользователя.)
```
function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}
```
Теперь необходимо присоединить событие к элементу управления. Для этого необходимо извлечь элемент управления и вызвать метод addEventListener. Вопрос заключается во времени возвращения элемента управления. Можно добавить метод в любое место кода JavaScript, но существует вероятность, что метод будет вызван до появления элемента управления.
- При добавлении элемента управления на начальную страницу вашего приложения, которая определяется файлами default.html и default.js, зарегистрируйте обработчики событий с помощью функции WinJS.UI.processAll. В каждом шаблоне Microsoft Visual Studio создается файл default.js, который вызывает функцию WinJS.UI.processAll в обработчике событий activated. Асинхронный метод WinJS.UI.processAll возвращает Promise. Чтобы присоединить свои обработчики событий, укажите для объекта Promise, который будет возвращен методом WinJS.UI.processAll, функцию then или done и используйте ее для присоединения обработчиков событий. (Подробнее об объектах Promise см. в разделе Асинхронное программирование на JavaScript.)
  
  В этом примере для привязки обработчика событий кнопки используется функция WinJS.UI.processAll.
```
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().done(function () {
                var button1 = document.getElementById("button1");
                button1.addEventListener("click", button1Click, false);
                })
            );
        }
    };

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

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

    }

    app.start();
})();
```
  Дополнительные сведения о методе WinJS.UI.processAll см. в разделе Краткое руководство: добавление элементов управления WinJS и стилей.
- При добавлении своего элемента управления в элемент управления Страница используйте функцию Страница элемента управления ready, чтобы добавить обработчики событий (и используйте элемент querySelector вместо элемента document.getElementById, как показано далее).
  
  Элемент управления WinJS Page предоставляет способ разделения содержимого на модульные, повторно используемые блоки. В приложении могут автоматически содержаться один или несколько элементов управления Page в зависимости от шаблона Visual Studio, по которому оно было создано.
  
  При создании элемента управления Page он автоматически включает функцию ready, которую можно использовать для добавления обработчика событий для своей кнопки. В этом примере показан полный код JavaScript для элемента управления Page, который добавляет обработчик событий click для кнопки.
```
// home.js
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {
        ready: function (element, options) { // Fires when the user navigates to home.html
            var button1 = element.querySelector("#button1");
            button1.addEventListener("click", this.button1Click, false);
        },

        button1Click: function(mouseEvent) {
            var button1Output = document.getElementById("button1Output");
            button1Output.innerText =
            mouseEvent.type
            + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
        }
    });
})();
```
  В предыдущем примере элемент this обозначает объект страницы, созданный вызовом WinJS.UI.Pages.define. Кроме того, функция button1Click: function(mouseEvent) {...} создает свойство (которое является анонимной функцией) для указанного объекта страницы. Поэтому функция this.button1Click (в элементе button1.addEventListener("click", this.button1Click, false)) действительно обозначает функцию button1Click:
```
button1Click: function(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";
}
```
  Подробнее об элементах управления Page см. в разделе Добавление элементов управления страницей.
- При добавлении такого элемента управления в собственные файлы HTML и JavaScript обработайте событие DOMContentLoaded и используйте его для вызова функции WinJS.UI.processAll. Вы можете зарегистрировать событие DOMContentLoaded в любом месте кода, поскольку ко времени выполнения кода объект document уже существует. Укажите функцию then или done для объекта Promise, возвращаемого WinJS.UI.processAll, и используйте эту функцию для присоединения обработчиков событий.

Когда вы запускаете приложение и нажимаете кнопку мыши, на экране отображаются координаты расположения указателя мыши при нажатии кнопки.

Примечания.

Не используйте URI JavaScript

Не используйте универсальные коды ресурсов (URI) JavaScript в обработчиках событий, поскольку ваше приложение не сможет обработать их. Например, если вы попробуете выполнить этот код, то при нажатии кнопки мыши ничего не произойдет:


<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="javascript: 2 + 2;">An HTML Button</button>

Это ограничение применимо к коду в локальном контексте приложения (коду, добавляемому в пакет приложения), но не применимо к коду на внешних веб-страницах, доступных приложению.

Использование форм

На обычном веб-сайте HTML элементы управления и другие элементы ввода расположены в элементе form. Элементы form используются для передачи данных на сервер. Поскольку большинство приложений разрабатывается для клиентов, как правило, вам не требуется использовать элемент form.

Использование прозрачных слоев

Чтобы определить конкретные взаимодействия пользователя или для отображения анимаций, часто используется прозрачный слой во весь экран, например пустой элемент div. Однако если элемент управления HTML располагается под прозрачным слоем, скорость его ответа при взаимодействии с пользователем может снизиться. Чтобы сохранить скорость ответа элементов управления HTML, не располагайте их под прозрачными слоями.

Краткая сводка и дальнейшие действия

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

В разделе Краткое руководство: добавление элементов управления и стилей WinJS вы узнаете, как использовать новые элементы управления WinJS, доступные приложениям среды выполнения Windows на JavaScript.

Подробнее о конкретных элементах управления см. в разделе Список элементов управления.

Примеры

Пример базовых элементов управления

Показаны примеры множества элементов управления HTML и WinJS.

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

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

Краткое руководство. Добавление элементов управления и стилей WinJS

Список элементов управления