1.06 Skill-builder: Javascript events

An eventful life

One of the ways that site builders test how their users interact with their pages is through click- and mouse-tracking. Essentially, as you go through the page, every sweep of the mouse and click are recorded and sent back to the website to help evaluate how well the design works. And of course, other site builders use this information for other, less savoury purposes.

Javascript reads mice clicks and movements, and browser behaviours, through events. You can use Javascript to respond to these events with functions.

Event examples

Click this! ← onclick event

Double click this! ← ondblclick event

← onkeypress event

Loading Ms. PacMan... ← onload event

← onmouseover event

← onerror event

Saving your work

Open your editor and save the empty document as "1.06S-JavascriptEvents-LastName.html"

The assignment

After playing with this page, pop open the context menu with your mouse and choose View page source.

Read over the code and try to link the HTML elements with the functions defined in the <script> block in the <head>.

Then create your own page that changes elements of the page based on user interactions.