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


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

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

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

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

Технологии

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

Инструкции

Задайте обработчик событий на элементе управления 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>
  1. Создайте свой обработчик событий в файле 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 + ")";
    
    }
    
  2. Как описано в статье Создание простых приложений, если вы следуете рекомендациям по программированию, все в вашем файле JavaScript будет частным. Прежде чем вы сможете настроить событие onclick элемента управления "кнопка" в своем HTML, вы должны сделать его общим. Один из способов сделать это — определить пространство имен и добавить ваш обработчик событий как общий.

    WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });
    
  3. В вашем файле 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>
  1. Создайте свой обработчик событий в файле JavaScript. В этом примере создается обработчик для события onchange элемента управления Rating.

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

    .

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

  3. Сделайте ваш обработчик событий общим, сделав его видимым в пространстве имен.

    WinJS.Namespace.define("startPage", {
        ratingChangedHandler: ratingChanged
    });
    
  4. В вашем файле 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>
    

Примечания

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

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

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

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