Sencha Touch2を引き続きで、今回はイベント周りを調査した。
イベント関連はコンフィグオプションでhandlerとして設定する方法や、リスナー登録する方法、コントローラで処理する方法など、色々と出てきた。
今回作成分はWebKitの開発ツールであるWeb InspectorのConsoleで見ることが前提となっており、ドキュメントに載っていない情報や取得したいプロパティなどの確認方法も解説していく。
まず今回はWeb Inspectorの使い方、次回にイベント周りの説明とする。

WebKit系ブラウザにはWeb Inspectorと呼ばれる開発ツールが含まれている。
Google Chrome版Firebug：デベロッパーツール取扱説明書
WebInspectorはFirebugを意識して作られた統合デバッグ環境であり下記のような方法で表示させることができる。

Chromeだと
表示→開発/管理→デベロッパーツール

safariでは、開発メニューを出してからWeb Inspectorを表示する。
環境設定→詳細→メニューバーに”開発”メニューを表示チェック
開発メニュー→web インスペクタを表示

今回いろいろとテストするのに作成したこのページを開いた後に、
event 01
Web Inspectorを表示させ、Consoleを開いて欲しい。
その状態でクリックなどの動作をさせるとログ表示されることが分かるだろう。
これはjsソースの
http://hvn.to/sencha/senchaTests/hello/apps/event01.js

eventDispatcher.addListener('element', '#tabP', '*', function(a,b,c,d) {
  var name = d.info.eventName;
  if (!name.match("mouse") && !name.match("click")) {
    console.log('tabP mouse event-----------------');
    console.log(d.info.eventName);
    console.log(a);

    var logger = Ext.getCmp('logger'),
    scroller = logger.getScrollable().getScroller();
    logger.updateHtml(d.info.eventName);
  }
});

とconsole.log(‘hoge’);でソースに書いたものが表示される。
さらにここにconsole.log(a);のように直接オブジェクトを指定するとオブジェクトがダンプされて表示され、パラメータ確認などが容易にできる。

Ext.apply.create.Class
browserEvent: MouseEvent
changedTouches: Array[1]
delegatedTarget: HTMLHtmlElement
event: MouseEvent
pageX: 268
pageY: 184
target: HTMLDivElement
targetTouches: Array[1]
time: 1323107784240
timeStamp: 1323107784240
touch: Object
touches: Array[1]
touchesMap: Object
type: "mousedown"
__proto__: TemplateClass

動作が重くなったりマウスを動かす時にログが追加されるのがうっとおしければ、インスペクタのScriptsタグをクリックし右上の一時停止ボタンでスクリプトの実行を止めてから確認するのが良い。

案外と長くなったので、今回はここまでにして次回はこのWeb Inspector、特にconsole.logを主に使いながらイベント調査した結果を書くことにする。