JavaScript：イベント取得のひな形

JavaScriptで「キーイベント」「マウスイベント」「加速度センサーイベント」を取得するプログラムのシンプルなひな形を作った。
マウスは、押したまま動かすとウインドウ左上を0,0としたXY座標を表示します。

HTML部分

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<link rel="stylesheet" href="mystyle.css">
6<script src="onEvent.js"></script>
7<title>JavaScript de Event</title>
8</head>
9<body>
10<h1>JavaScript de Event</h1>
11<p><strong>キーイベント・マウスイベント・加速度センサーイベント</strong>を取得します</p>
12<p id="display">イベントをどうぞ！</p>
13</body>
14</html>

JavaScript部分

1/*
2 * JavaScript de Event
3 */
4 
5// 画面表示関数（いわゆるprint）
6function print(str){
7    document.getElementById("display").innerHTML = str;
8}
9 
10// キーイベントの取得
11window.onkeydown = keyHandler;
12 
13function keyHandler(e){
14    print("keyCode = " + e.keyCode);
15}
16 
17// マウスイベントの取得
18var isMouseDown = false;
19 
20window.onmousedown = mouseDownHandler;  // スマホならontouchstart
21window.onmouseup = mouseUpHandler;          // スマホならontouchmove
22window.onmousemove = mouseMoveHandler;  // スマホならontouchend
23 
24function mouseDownHandler(e){
25    isMouseDown = true;
26    print("マウスを押した！");
27}
28 
29function mouseUpHandler(e){
30    isMouseDown = false;
31    print("マウスを離した！");
32}
33 
34function mouseMoveHandler(e){
35    if(isMouseDown){
36        // マウスの絶対位置を取得
37        var x = e.clientX;
38        var y = e.clientY;
39        // 相対座標の計算
40        var r = e.target.getBoundingClientRect();
41        x -= r.left;
42        y -= r.top;
43         
44        print("mouseXY = " + x + ", " + y);
45    }
46}
47 
48// 加速度センサーイベントの取得
49window.ondevicemotion = motionHandler;
50 
51function motionHandler(e){
52    // 左右方向
53    var x = e.accelerationIncludingGravity.x;
54    // 上下方向
55    var y = e.accelerationIncludingGravity.y;
56    // 前後方向
57    var z = e.accelerationIncludingGravity.z;
58     
59    print("加速度センサー x: " + x + " y: " + y + " z: " + z);
60}