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

JavaScript

2014.05.092018.10.10

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

HTML部分

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

JavaScript部分

/*
 * JavaScript de Event
 */

// 画面表示関数（いわゆるprint）
function print(str){
	document.getElementById("display").innerHTML = str;
}

// キーイベントの取得
window.onkeydown = keyHandler;

function keyHandler(e){
	print("keyCode = " + e.keyCode);
}

// マウスイベントの取得
var isMouseDown = false;

window.onmousedown = mouseDownHandler;	// スマホならontouchstart
window.onmouseup = mouseUpHandler;			// スマホならontouchmove
window.onmousemove = mouseMoveHandler;	// スマホならontouchend

function mouseDownHandler(e){
	isMouseDown = true;
	print("マウスを押した！");
}

function mouseUpHandler(e){
	isMouseDown = false;
	print("マウスを離した！");
}

function mouseMoveHandler(e){
	if(isMouseDown){
		// マウスの絶対位置を取得
		var x = e.clientX;
		var y = e.clientY;
		// 相対座標の計算
		var r = e.target.getBoundingClientRect();
		x -= r.left;
		y -= r.top;
		
		print("mouseXY = " + x + ", " + y);
	}
}

// 加速度センサーイベントの取得
window.ondevicemotion = motionHandler;

function motionHandler(e){
	// 左右方向
	var x = e.accelerationIncludingGravity.x;
	// 上下方向
	var y = e.accelerationIncludingGravity.y;
	// 前後方向
	var z = e.accelerationIncludingGravity.z;
	
	print("加速度センサー x: " + x + " y: " + y + " z: " + z);
}