function rowMouseOver() {
this.parentNode.className = "rowHover";
}
// onMouseOut handler for rows in Inbox or Sent Messages.
function rowMouseOut() {
this.parentNode.className = this.parentNode.rowClass;
}
You may be wondering about that rowClass attribute. There??™s no such attribute in HTML!
It is in fact a custom attribute that??™s used to store the class of the row that a cell uses. In DOM
scripting, you can add attributes at will to nodes, or to HTML tags, which of course are themselves
DOM nodes. This comes in very handy when you need to store bits of metadata about a
node, as is the case here.
Contrast the two event handler versions, meaning look at the event handlers for the buttons
vs. the handlers for the rows, and you will see they are a bit different. Part of it is that they
had to be different, and part of it is that I wanted them to be for the sake of seeing two
approaches. First, let??™s discuss why they had to be different . . . as you can see in Figures 4-3
and 4-4, the Inbox and Sent Messages views contain a table listing messages that you can click
to view the message. The contents of these tables are generated dynamically. Part of that generation
is attaching event handlers to the cells in the table.
Pages:
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283