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

Applies to Windows and Windows Phone

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

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

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

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

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

В большинстве моделей программирования элемент управления используется для отображения содержимого и взаимодействия с ним. Поскольку большинство элементов 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Регистрация обработчика событий программными средствами

  1. Создайте элемент управления и присвойте ему идентификатор. В этом примере создается кнопка с идентификатором "button1".
    <button id="button1">An HTML button</button>
  2. Только для этого примера создайте элемент абзаца и назначьте идентификатор "button1Output". Вы будете использовать его для отображения данных о событии нажатия кнопки.

    <p id="button1Output"></p>
  3. В своем коде 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 + ")";
    
    }
  4. Теперь необходимо присоединить событие к элементу управления. Для этого необходимо извлечь элемент управления и вызвать метод 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 и стилей.

    • При добавлении вашего элемента управления к элементу управления Page прикрепите ваши обработчики событий с помощью функции ready элемента управления Page.

      Элемент управления WinJS  Page предоставляет способ разделения содержимого на модульные, повторно используемые блоки. В приложении могут автоматически содержаться один или несколько элементов управления Page в зависимости от шаблона Visual Studio, по которому оно было создано.

      При создании элемента управления Page он автоматически включает функцию ready, которую можно использовать для добавления обработчика событий для своей кнопки. В этом примере показан полный код JavaScript для элемента управления Page, который добавляет обработчик событий click для кнопки.

      // home.js
      (function () {
          "use strict";
      
          WinJS.UI.Pages.define("/pages/home/home.html", {
              // This function is called whenever a user navigates to this page. It
              // populates the page elements with the app's data.
              ready: function (element, options) {
                  // TODO: Initialize the page here.
                  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 + ")";
      
              }
          });
      })();
      

      Подробнее об элементах управления Page см. в разделе Добавление элементов управления страницей.

    • При добавлении такого элемента управления в собственные файлы HTML и JavaScript обработайте событие DOMContentLoaded и используйте его для вызова функции WinJS.UI.processAll. Вы можете зарегистрировать событие DOMContentLoaded в любом месте кода, поскольку ко времени выполнения кода объект document уже существует. Укажите функцию then или done для объекта Promise, возвращаемого WinJS.UI.processAll, и используйте эту функцию для присоединения обработчиков событий.

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

Почему не следует регистрировать обработчик событий в разметке

Вы можете добавить обработчики событий в разметку. Однако в некоторых случаях это может оказаться сложнее, чем добавление обработчика событий с помощью метода addEventListener, из-за несоответствия областей видимости. Когда вы создаете приложение среды выполнения Windows на JavaScript с помощью шаблона Пустое приложение из Visual Studio, создается файл default.js следующего вида:

(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());
        }
    };

    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().
    };

    app.start();
})();

Весь код содержится в анонимной глобальной функции. Добавление кода в анонимную глобальную функцию имеет свои преимущества, поскольку при этом ограничивается область действия кода и предотвращается засорение глобального пространства имен. Если вы добавили обработчик событий, описанный ранее, то файл кода программной части будет выглядеть следующим образом:

(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());
        }
    };

    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().
    };

    function button1Click(mouseEvent) {
        var button1Output = document.getElementById("button1Output");
        button1Output.innerText =
        mouseEvent.type
        + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

    }

    app.start();
})();

Если вы указали обработчик событий в разметке, а не в коде, разметка для кнопки будет выглядеть следующим образом:

<!-- Incorrect code. Do not use this in your solution. -->
<button id="button1" onclick="button1Click(event)">An HTML button</button>

Если вы запустите приложение и нажмете кнопку мыши, то ничего не произойдет. Это связано с тем, что функция button1Click добавлена в анонимную функцию и недоступна напрямую в разметке. Чтобы код заработал, вам потребуется перенести код функции button1Click из анонимной функции.

(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());
        }
    };

    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().
    };

    app.start();
})();

function button1Click(mouseEvent) {
    var button1Output = document.getElementById("button1Output");
    button1Output.innerText =
    mouseEvent.type
    + ": (" + mouseEvent.clientX + "," + mouseEvent.clientY + ")";

}

Но сейчас функция button1Click является глобальной, что не совпадает с нашими планами. Лучше было бы переместить определение функции button1Click обратно в анонимную функцию и затем с помощью функции WinJS.Namespace.define сделать ее общедоступной (пример см. в разделе Декларативная настройка обработчиков событий).

Примечания.

Не используйте 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.

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

Примеры

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

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

 

 

Корпорация Майкрософт проводит интернет-опрос, чтобы выяснить ваше мнение о веб-сайте. Если вы желаете принять участие в этом интернет-опросе, он будет отображен при закрытии веб-сайта.

Вы желаете принять участие?