선언적으로 이벤트 처리기를 설정하는 방법
[ 이 문서는 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"> </div>
</body>
</html>
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 + ")"; }기본 앱 코딩에 설명된 대로 좋은 프로그래밍 사례를 따를 경우 JavaScript 파일의 모든 항목은 비공개가 됩니다. HTML에서 단추 컨트롤의 onclick 이벤트를 설정하려면 먼저 공개로 설정해야 합니다. 이 작업을 수행하는 한 가지 방법은 네임스페이스를 정의하고 이벤트 처리기를 공개 멤버로 추가하는 것입니다.
WinJS.Namespace.define("startPage", { clickEventHandler: button1Click });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"> </div>
</div>
</body>
</html>
JavaScript 코드에서 이벤트 처리기를 만듭니다. 이 예제에서는 Rating의 onchange 이벤트에 대한 처리기를 만듭니다.
function ratingChanged(eventInfo) { var ratingOutputDiv = document.getElementById("ratingOutputDiv"); ratingOutputDiv.innerText = eventInfo.detail.tentativeRating; }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 함수는 편의를 위해 제공되었습니다.네임스페이스를 통해 이벤트 처리기를 노출하여 공개로 설정합니다.
WinJS.Namespace.define("startPage", { ratingChangedHandler: ratingChanged });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"> </div>
설명
이벤트 처리기를 공개적으로 노출해야 하는 이유에 대한 자세한 내용과 이벤트 처리기를 등록하는 다른 방법은 기본 앱 코딩을 참조하세요.