Common Programming Error 1.1
Putting quotes around the function name when registering it using the inline model would assign a string to the onclick property of the nodea string cannot be called.
Common Programming Error 1.2
Putting parentheses after the function name when registering it using the inline model would call the function immediately and assign its return value to the onclick property.
Once the event handler is registered in line 28, the div in line 39 has the same behavior as the
div in lines 3536, because
handleEvent (lines 1922) is set to handle the
onclick event for both
divs. When either
div is clicked, an alert will display "The event was successfully handled."
onload event fires whenever an element finishes loading successfully (i.e., all its children are loaded). Frequently, this event is used in the body element to initiate a script after the page loads in the clients browser. Figure 11.2 uses the
onload event for this purpose. The script called by the
onload event updates a timer that indicates how many seconds have elapsed since the document was loaded.
Our use of the
onload event occurs in line 30. After the body section loads, the browser triggers the
onload event. This calls function
startTimer (lines 1519), which in turn uses method
window.setInterval to specify that function
updateTime (lines 2226) should be called every 1000 milliseconds. The
updateTime function increments variable seconds and updates the counter on the page.
Note that we could not have created this program without the
onload event, because elements in the XHTML page cannot be accessed until the page has loaded. If a script in the head attempts to get a DOM node for an XHTML element in the body,
getElementById returns null because the body has not yet loaded. Other uses of the
onload event include opening a pop-up window once a page has loaded and triggering a script when an image or Java applet loads.
Common Programming Error 1.3
Trying to get an element in a page before the page has loaded is a common error. Avoid this by putting your script in a function using the onload event to call the function.
Event onmousemove, the event Object and this
This section introduces the
onmousemove event, which fires repeatedly whenever the user moves the mouse over the web page. We also discuss the event object and the keyword this, which permit more advanced event-handling capabilities. Figure 11.3 uses
onmousemove and this to create a simple drawing program that allows the user to draw inside a box in red or blue by holding down the Shift or Ctrl keys.
The XHTML body has a table with a
tbody containing one row that gives the user instructions on how to use the program. The bodys
onload attribute (line 61) calls function
createCanvas, which initializes the program by filling in the table.
createCanvas function (lines 2341) fills in the table with a grid of cells. The CSS rule in lines 1415 sets the width and height of every
td element to 4px. Line 11 dictates that the table is 400px wide. Line 13 uses the border-collapse CSS property to eliminate space between the table cells.
Line 25 defines variable side, which determines the number of cells in each row and the number of rows created by the nested for statements in lines 2840. We set side to 100 in order to fill the table with 10,000 4px cells. Line 26 stores the
tbody element so that we can append rows to it as they are generated.