User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 290

…
window.onload = init;
This sets the onload property to our custom event handling init() function,
meaning the init() function will run when the window has fully loaded and sent a
notification of the onload event.
Each possible event can be associated with a function in this way. For example, the
following would associate a function that pops up an alert box when the page is clicked:
function windowClickHandler() {
alert( "Window was clicked" ); // pops up an alert

box
}
window.onclick = windowClickHandler;
If the function associated with an event is given a parameter, then that parameter holds
an object with information about the event that occurred. For instance, the following
uses a parameter (named e ) that contains a pageX and pageY property, which speci-
fies the location of the mouse cursor on the page:
// logs the event object function windowMouseDownHandler(e)
{
con-
sole.log(e);
// log the mouse location
console.log("Mouse is at: " + e.pageX + ", " +
e.pageY); }
window.onmousedown = windowMouseDownHandler;
When this code is run and the page is clicked, the event object (a MouseEvent ob-
ject in this case) and the mouse location will be logged to the console.

The History API

Let's put all this JavaScript knowledge to use! I mentioned that the window object con-
tains a history object for controlling the browser's forward and back buttons. This is
actually not all that can be done with the history object, and HTML5 has built on
the History API 2 to allow the actual history record to be updated programmatically. This
means pages can be added to the history of the browser, and if the user actually clicks
the back button, they will go to the pages that have been added to the history instead of
pages they previously visited. The usefulness of this is evident in pages that use Ajax