特別なオブジェクト（window, document等）へのイベントハンドラの設定
Last modified by fukudayasuo on 2014/06/06, 14:13
特別なオブジェクト（window, document等）へのイベントハンドラの設定
windowやdocument, navigatorなど、イベントを発生させる特別なオブジェクトを指定したい場合もあると思います。
そのような場合は、セレクタの部分に、「{}（中かっこ）」で囲んでオブジェクトを記述します。
指定できるオブジェクトは以下の通りです。
- windowオブジェクト
- documentオブジェクト
- navigatorオブジェクト
- window.xxxで表現されるオブジェクト
- document.xxxで表現されるオブジェクト
- navigator.xxxで表現されるオブジェクト
例：
'{document} click': function() {}
window,document,navigatorは、それぞれコントローラをバインドしたルートエレメントが属するwindow,window.document,window.navigatorになります。
iframeやポップアップウィンドウの中にある要素にコントローラをバインドした場合、'{window} click'でバインドの対象になるwindowオブジェクトは、iframeやポップアップウィンドウのwindowオブジェクトです。
例：
var iFrame = $('iframe')[0];
var iFrameWindow = iFrame.contentWindow;
var iFrameDocument = iFrameWindow.document;
var iFrameBody = iFrameDocument.body;
// コントローラをiframeのbody要素にバインド
h5.core.controller(iFrameBody, {
__name: 'iframeController',
'{window} click': function(context, $el) {
// $elは$(iFrameWindow)
},
'{document} click': function(context, $el) {
// $elは$(iFrameDocument)
},
'{document.body} click': function(context, $el) {
// $elは$(iFrameBody)
},
'{navigator.battery} levelchange': function(context, $el) {
// $elは$(iFrameWindow.navigator.battery);
}
}
var iFrameWindow = iFrame.contentWindow;
var iFrameDocument = iFrameWindow.document;
var iFrameBody = iFrameDocument.body;
// コントローラをiframeのbody要素にバインド
h5.core.controller(iFrameBody, {
__name: 'iframeController',
'{window} click': function(context, $el) {
// $elは$(iFrameWindow)
},
'{document} click': function(context, $el) {
// $elは$(iFrameDocument)
},
'{document.body} click': function(context, $el) {
// $elは$(iFrameBody)
},
'{navigator.battery} levelchange': function(context, $el) {
// $elは$(iFrameWindow.navigator.battery);
}
}