선언적으로 이벤트 처리기를 설정하는 방법

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

HTML 태그에서 HTML 및 JavaScript용 Windows 라이브러리 컨트롤에 대해 선언적으로 이벤트 처리기를 설정하는 방법을 알아봅니다.

알아야 할 사항

기술

사전 요구 사항

  • 여기서는 WinJS 컨트롤을 사용하는 JavaScript로 작성된 기본 Windows 스토어 앱을 만들 수 있다고 가정합니다. 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>

  1. JavaScript 코드에서 이벤트 처리기를 만듭니다. 이 예제에서는 button의 onclick 이벤트에 대한 처리기를 만듭니다.

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

}

  2. 기본 앱 코딩에 설명된 대로 좋은 프로그래밍 사례를 따를 경우 JavaScript 파일의 모든 항목은 비공개가 됩니다. HTML에서 단추 컨트롤의 onclick 이벤트를 설정하려면 먼저 공개로 설정해야 합니다. 이 작업을 수행하는 한 가지 방법은 네임스페이스를 정의하고 이벤트 처리기를 공개 멤버로 추가하는 것입니다.

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

  3. HTML 파일에서 컨트롤의 이벤트 처리기를 namespace.member(event)으로 설정합니다. 이 예제에서는 onclick을 startPage.clickEventHandler(event)로 설정합니다.

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

선언적으로 JavaScript용 Windows 라이브러리 컨트롤에 이벤트 처리기 설정

이 예제에서는 WinJS.UI.Rating 컨트롤의 onchange 이벤트를 설정하는 방법을 보여 줍니다. 등급을 선택하면 처리기가 출력 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 코드에서 이벤트 처리기를 만듭니다. 이 예제에서는 Rating의 onchange 이벤트에 대한 처리기를 만듭니다.

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

  2. HTML 컨트롤에 대한 이벤트 처리기 설정과 WinJS 컨트롤에 대한 이벤트 처리기 설정에 차이가 있는 위치입니다.

    앱을 보호하기 위해 WinJS 컨트롤은 공개 함수인 경우에도 함수를 선언적으로 액세스할 수 없습니다. WinJS.UI.eventHandler 메서드를 호출하고 이벤트 처리기를 전달하여 WinJS에 함수 액세스 권한을 부여할 수 있습니다.

    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>

설명

이벤트 처리기를 공개적으로 노출해야 하는 이유에 대한 자세한 내용과 이벤트 처리기를 등록하는 다른 방법은 기본 앱 코딩을 참조하세요.

관련 항목

컨트롤 추가 및 스타일 지정

기본 앱 코딩