Comment définir des gestionnaires d’événements de façon déclarative

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez comment définir des gestionnaires d’événements de façon déclarative (dans votre balisage HTML) pour les contrôles HTML et de la Bibliothèque Windows pour JavaScript.

Ce que vous devez savoir

Technologies

Prérequis

Instructions

Définir un gestionnaire d’événements sur un contrôle HTML de façon déclarative

Cet exemple vous montre comment créer un gestionnaire d’événements onclick pour un bouton. Lorsque vous cliquez sur l’objet button, le gestionnaire ajoute les coordonnées du clic à un élément div de sortie. Voici le balisage HTML de départ.

<!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. Dans votre fichier JavaScript, définissez le gestionnaire d’événements. Cet exemple illustre la création de handles pour l’événement onclick d’un objet button.

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

}

  2. Comme il est indiqué dans Codage d’applications de base, si votre programmation est correcte, tout ce que contient votre fichier JavaScript sera privé. Avant de définir l’événement onclick du contrôle bouton dans le balisage HTML, vous devez le rendre public. Pour cela, vous pouvez définir un espace de noms et ajouter le gestionnaire d’événements en tant que membre public.

    WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });

  3. Dans votre fichier HTML, définissez le gestionnaire d’événements du contrôle sur namespace.member(événement). Cet exemple définit onclick sur startPage.clickEventHandler(event).

    <button id="button1" onclick="startPage.clickEventHandler(event)">An HTML button</button>
<div id="button1Output"></div>

Définir un gestionnaire d’événements sur un contrôle de la Bibliothèque Windows pour JavaScript de façon déclarative

L’exemple suivant vous montre comment définir l’événement onchange d’un contrôle WinJS.UI.Rating. Lorsque vous sélectionnez une évaluation, le gestionnaire ajoute la valeur de cette évaluation à un élément div de sortie. Voici le balisage HTML de départ.

<!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. Dans votre fichier JavaScript, définissez le gestionnaire d’événements. Cet exemple illustre la création de handles pour l’événement onchange d’un objet Rating.

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

  2. Voici la différence entre définir un gestionnaire d’événements pour un contrôle HTML et en définir un pour un contrôle WinJS.

    Pour protéger votre application, les contrôles WinJS ne peuvent pas accéder à vos fonctions de façon déclarative, même s’ils sont publics. Pour accorder aux contrôles WinJS l’accès à vos fonctions, appelez la méthode WinJS.UI.eventHandler et transmettez-la à votre gestionnaire d’événements.

    WinJS.UI.eventHandler(ratingChanged);

    WinJS.UI.eventHandler ajoute une propriété à la fonction nommée supportedForProcessing et lui affecte la valeur "true". Si vous voulez que des contrôles WinJS puissent accéder à une fonction autre qu’un gestionnaire d’événements dans le balisage HTML, utilisez WinJS.Utilities.markSupportedForProcessing. Vous pouvez également juste ajouter la propriété supportedForProcessing à votre fonction manuellement ; les fonctions WinJS.UI.eventHandler et WinJS.Utilities.markSupportedForProcessing sont fournies pour des raisons pratiques.

  3. Rendez votre gestionnaire d’événements public en l’exposant via un espace de noms.

    WinJS.Namespace.define("startPage", {
    ratingChangedHandler: ratingChanged
});

  4. Dans votre fichier HTML, définissez le gestionnaire d’événements du contrôle sur namespace.member. Cet exemple définit onchange sur startPage.ratingChangedHandler.

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

Remarques

Pour plus d’informations sur les raisons d’une exposition publique des gestionnaires d’événements et pour connaître d’autres manières d’enregistrer des gestionnaires d’événements, voir Codage d’applications de base.

Rubriques associées

Ajout et stylisation de contrôles

Codage d’applications de base