HTML and CSS Reference
In-Depth Information
var canvas = document.getElementById('canvas'),
touch = utils.captureTouch(canvas);
You must be certain that there is a touch present before accessing the
x
and
y
properties; otherwise, their
values will be
null
and potentially mess up the animation calculations. Therefore, for any touch location
queries, be sure to check whether there is an active touch press:
if (touch.isPressed) {
console.log("x: " + touch.x + ", y: " + touch.y);
}
Touch events won't be used much in this topic because we're concentrating on the underlying math that
makes the examples work. But, this should give you an idea about how to use them if you wanted to
experiment with a touch device.
Keyboard events
Keyboard event types, like all event types, are defined as strings. There are only two:
keydown
keyup
You can listen for keyboard events on elements that support character input—such as a text area
element—the same way you listened for mouse events on the canvas element. But, you first need to set
the focus to that element to capture these keyboard events. Assuming you have an HTML
textarea
element stored at the variable
textarea
, you can set its focus and capture a
keydown
event, like so:
textarea.focus();
textarea.addEventListener('keydown', function (event) {
console.log(event.type);
}, false);
In many cases, though, it makes more sense to listen for keyboard events on the web page, regardless of
what has focus. To do that, attach a keyboard event listener on the global
window
object. The following
example detects when you press and release a key, regardless of what element has focus (example
06-
keyboard-events.html
):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard Events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
window.onload = function () {
function onKeyboardEvent (event) {
console.log(event.type);
}
