Common Programming Error
Although you can omit the
for statements in lines 2840 fill the table with a 100 × 100 grid of cells. The outer loop creates each table row, while the inner loop creates each cell. The inner loop uses the
createElement method to create a table cell, assigns function
processMouseMove as the event handler for the cells
onmousemove event and appends the cell as a child of the row. The
onmousemove event of an element fires whenever the user moves the mouse over that element.
At this point, the program is initialized and simply calls
processMouseMove whenever the mouse moves over any table cell. The function
processMouseMove (lines 4457) colors the cell the mouse moves over, depending on the key that is pressed when the event occurs. Lines 4448 get the
event object, which stores information about the event that called the event-handling function.
Internet Explorer and Firefox do not implement the same event models, so we need to account for some differences in how the
eventobject can be handled and used. Firefox and other W3C-compliant browsers (e.g., Safari, Opera) pass the event object as an argument to the event-handling function. Internet Explorer, on the other hand, stores the event object in the event property of the window object. To get the event object regardless of the browser, we use a two-step process. Function
processMouseMovetakes the parameter e in line 44 to get the event object from Firefox. Then, if e is undefined (i.e., if the client is Internet Explorer), we assign the object in window.event to e in line 48.
In addition to providing different ways to access the event object, Firefox and Internet Explorer also implement different functionality in the
event object itself. However, there are several properties that both browsers implement with the same name, and some that both browsers implement with different names. In this book, we use properties that are implemented in both event models, or we write our code to use the correct property depending on the browserall of our code runs properly in IE7 and Firefox 2 (and higher).
To determine which table cell to color, we introduce the this keyword. The meaning of this depends on its context. In an
event-handling function, this refers to the DOM object on which the event occurred. Our function uses this to refer to the table cell over which the mouse moved. The this keyword allows us to use one event handler to apply a change to one of many DOM elements, depending on which one received the event.
Lines 5152 change the background color of this table cell to blue if the Ctrl key is pressed during the event. Similarly, lines 5556 color the cell red if the Shift key is pressed. To determine this, we use the shiftKey property of the event object. This simple function allows the user to draw inside the table on the page in red and blue.
This example demonstrated the
shiftKey properties of the
event object. Figure 11.4 lists some important cross-browser properties of the
Click here for larger image
Some event object properties.
This section introduced the event onmousemove and the keyword this. We also discussed more advanced event handling using the event object to get information about the event. The next section continues our introduction of events with the onmouseover and onmouseout events.