Dart - イベント(onClick, onKeyDown, MouseEvent, KeyboardEvent, プロパティ(clientX, clientY, screenX, screenY), 複数の登録(..))

Dart: Up and Running
(O'Reilly Media)
Kathy Walrath Seth Ladd (著)
[Kindle版]
このブログでの感想

開発環境

• OS X Mavericks - Apple (OS)
• Dart Editor (開発環境)
• Dartium | Dart/ Structured web apps (ブラウザ, Dart VM 用 (Chromium with the Dart VM))
• Safari (ブラウザ, JavaScript 用)
• Dart (プログラミング言語)

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリージャパン、2009年、ISBN978-4-87311-425-5) の7章(イベント)、練習問第7-1、7-2、7-3、7-4、7-5.をDartで解いてみる。

その他参考書籍

• What is Dart? [Kindle版] (O'Reilly Media) Kathy Walrath Seth Ladd (著) このブログでの感想

練習問第7-1、7-2、7-3、7-4、7-5.

コード

sample.dart

import 'dart:html';

void main(){
  var body = querySelector('body'),
      pre0 = querySelector('#pre0');
  body
    ..onClick.listen((event){
      var result = 'クリックを検知しました。\n' +
          'ドキュメントのウィンドウを基準とした、クリックした位置の座標: ' +
          'x座標 ${event.clientX} y座標 ${event.clientY}\n' +
          'コンピューターの画面を基準とした座標: ' +
          'x座標 ${event.screenX} y座標 ${event.screenY}\n';
      pre0.text = result;
  })
    ..onKeyDown.listen((KeyboardEvent event){
      var result = '押されたキーのコード(整数): ${event.keyCode}';
      pre0.text = result;
  });
}

Dartium(Chromium with the Dart VM)だと上手くいくけど、他のブラウザ(確認したのはSafari, Chrome(いずれもMac版))だと、onKeyDownは上手くいってもonClickが動作しない。コードが違ってるのか、dart2js(DartのコードをJavaScriptのコードに変換するコンパイラ)の問題なのか、どっちかなぁ。