宣言を使ってイベント ハンドラーを設定する方法
[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]
HTML コントロールおよび JavaScript 用 Windows ライブラリのコントロール向けのイベント ハンドラーを、HTML マークアップ内で宣言を使って設定する方法を説明します。
理解しておく必要があること
テクノロジ
必要条件
- 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 コードで button コントロールの onclick イベントを設定するには、これをパブリックにする必要があります。その方法の 1 つは、名前空間を定義して、イベント ハンドラーをパブリック メンバーとして追加する方法です。
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 が関数にアクセスできるようにするには、WinJS.UI.eventHandler メソッドを呼び出して、それをイベント ハンドラーに渡します。
WinJS.UI.eventHandler(ratingChanged);WinJS.UI.eventHandler は、
supportedForProcessingという名前の関数にプロパティを追加し、それを "true" に設定します。イベント ハンドラー以外の関数が HTML を利用して WinJS にアクセスできるようにするには、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>
注釈
イベント ハンドラーを公開してパブリックにする必要がある理由と、イベント ハンドラーを登録するその他の方法について詳しくは、「基本的なアプリのコーディング」をご覧ください。