Input device events
We’ve already seen
click
, but there are additional mouse events (
mousedown
,
move
,
mouseup
,
mouseenter
,
mouseleave
,
mouseover
,
mousewheel
) and keyboard
events (
keydown
,
keypress
,
keyup
). Note that “touch” events (for touch-enabled
devices) take precedence over mouse events, but if touch events aren’t handled,
they result in mouse events. For example, if a user touches a button, and touch
events aren’t handled explicitly, a
click
event will be raised.
Media events
Allow you to track a user’s interaction with HTML5 video and audio players
(
pause
,
play
, etc.).
Progress events
Inform you about the browser’s progress loading content. The most common is
load
, which fires once the browser has loaded the element and all its dependent
resources.
error
is also useful, allowing you to take action when an element is
unavailable (for example, a broken image link).
Touch events
Touch events provide sophisticated support for devices that allow touch. Multiple
simultaneous touches are permitted (look for the
touches
property in the event),
enabling sophisticated touch handling, such as support for gestures (pinch,
swipe, etc.).
Ajax
Ajax (which was originally an acronym for “Asynchronous JavaScript and XML”) ena‐
bles asynchronous communication with a server—allowing elements on your page to
be refreshed with data from the server without reloading the entire page. This inno‐
vation was made possible with the introduction of the
XMLHttpRequest
object in the
early 2000s, and ushered in what became known as “Web 2.0.”
The core concept of Ajax is simple: browser-side JavaScript makes HTTP requests
programatically to a server, which returns data, usually in JSON format (which is
much easier to work with in JavaScript than XML). That data is used to enable func‐
tionality on the browser. While Ajax is based on HTTP (just like non-Ajax web
pages), the overhead of transferring and rendering a page is reduced, enabling web
applications that perform much faster—or at least appear to from the user’s perspec‐
tive.
To use Ajax, we need to have a server. We’ll write an extremely simple server in
) that exposes an Ajax endpoint (a specific ser‐
vice that is exposed for use in other services or applications). Create a file called ajax‐
Server.js:
Ajax | 271
