Multiple Events

What if I want both the background color change and the text in the status bar? How would I do that? Common sense says to write two onMouseOver commands. I want them to occur at the same time, so I cannot use a semicolon after the first command, because it is a statement terminator. However, I can use it after the second, and last, command.

There is a new rule: Use a comma when setting multiple Javascript events. The comma does not separate these two commands from each other.

Now, what about those pesky quotation marks? Double quotes go around the entire Event Handler statement, while the single quotes go around the effects (such as the text to be printed or the color to be used.) One set of doubles and two sets of the single quotes will do it.

To have these two onMouseOver commands to happen as one, I only need at the start of the first Event Handler statement and again at the end of the second one. That way, the quotation marks surround it all, which the browser will comprehend as one event. The single quotations still surround the color and the text:

HTML file: Displayed by browser:
<body>

<A HREF="http://www.htmlgoodies.com" target="_blank"
onMouseOver="document.bgColor='pink',
onMouseOver=window.status='Go to the Goodies Home Page';
    return true">Click Here</A>

</body>
Click Here

JavaScript is very logical, so if I take the time to "think things through" to figure out what must happen for my ideas to come to life in script. Event Handlers are great and there are a whole slew of them, which I am about to meet!

Back   Table of Contents   Next