Triggering Events in Javascript

JavaScript we’ve seen is triggered when a web page loads into a browser. But JavaScript can also be event driven. Event-driven JavaScript waits for your visitor to take a particular action, such as mousing over an image, before it reacts. The key to coding eventdriven JavaScript is to know the names of events and how to use them.

Event Types

With JavaScript’s help, different parts of your web page can detect different
events. For example, a pull-down menu can know when it has changed, a window when it has closed and a link when a visitor has clicked on it. In this chapter I’ll focus on link events.

A link can detect many kinds of events, all of which involve interactions with the mouse. The link can detect when your mouse moves over it and when your mouse moves off of it. The link knows when you click down on it, and whether, while you’re over the link, you lift your finger back off the button after clicking down. The link also knows whether the mouse moves while over the link

1. Onclick:

Before adding JavaScript:
<a href = "http://www.bookofjavascript.com/">Visit the Book of JavaScript
website</a>
After adding JavaScript:
<a href = "http://www.bookofjavascript.com/"
onClick = "alert('Off to the Book of JavaScript!');">Visit the Book of
JavaScript website</a>
Try putting the link with the onClick into one of your own web pages.When you click the link, an alert box should come up and say Off to the Book of JavaScript!. When you click OK in the box, the page should load the Book of JavaScript website.
Notice that, aside from the addition of onClick, this enhanced link is
almost exactly like the normal link. The onClick event handler says, “When
this link is clicked, pop up an alert.”

2. onMouseOver and onMouseOut

Two other link events are onMouseOver and onMouseOut. Moving the mouse over
a link triggers onMouseOver,

<a href = "#" onMouseOver = "alert('Mayday! Mouse overboard!');">board</a>
As you can see, moving the mouse over the link triggers onMouseOver. The
code for onMouseOut looks like the onMouseOver code (except for the handler
name) and is triggered when the mouse moves off of the link. You can use
onMouseOut, onMouseOver, and onClick in the same link.

<a href = "#"
onMouseOver = "alert('Mayday! Mouse overboard!');"
onMouseOut = "alert('Hooray! Mouse off of board!!');"
onClick = "return false;">
board
</a>

Mousing over this link results in an alert box showing the words Mayday! Mouse overboard!. Pressing ENTER to get rid of the first alert and moving your mouse off the link results in another alert box that contains the words Hooray! Mouse off of board!! If you click the link instead of moving your mouse off it, nothing will happen, because of the return false, code in the onClick.

3. onMouseMove, onMouseUp, and onMouseDown

The onMouseMove, onMouseUp, and onMouseDown event handlers work much like the others. Try them yourself and see. The onMouseMove event handler is called whenever the mouse is moved while it is over the link. The onMouseDown event handler is triggered when a mouse button is pressed down while the mouse is over a link. Similarly, the onMouseUp event handler is triggered when the mouse button is lifted up again. An onClick event handler is triggered whenever an onMouseDown event is followed by an onMouseUp event.

4. Quotes in JavaScript

<script>script</> The only exception to this rule is when JavaScript is inside the quotes of an event. Your browser will assume that anything within these quotes is JavaScript, so you shouldn’t put <script> and </script> tags
in there.
Also note that the quotes in the alert are single quotes ('). If these were
double quotes ("), JavaScript wouldn’t be able to figure out which quotes go
with what. For example, if you wrote
onClick = "alert("Off to the Book of JavaScript!");"
JavaScript would think that the second double quote closed the first one, which would confuse it and result in an error. Make sure that if you have quotes inside quotes, one set is double and the other is single.

Problem with Apostrophes
Apostrophes can also pose problems.

Example:
onClick = "alert('Here's the Book of JavaScript page. You're gonna love it!');"

Unfortunately, JavaScript reads the apostrophes in Here's and You're as single quotes inside single quotes and gets confused. If you really want those apostrophes, escape them with a backslash (\), like this:

onClick = "alert('Here\'s the Book of JavaScript page. You\'re gonna love it!');"

Putting a backslash before a special character, such as a quote, tells
JavaScript to print the item rather than interpret it.

Change Background color
A simple script to change the background color is

<a href = "#"
onClick = "var the_color = prompt('red or blue?','');
window.document.bgColor = the_color;
return false;">

When you click this link, a prompt box asks whether you want to change
the background to red or blue. When you type your response, the background
changes to that color. In fact, you can type whatever you want into that prompt
box, and your browser will try to guess the color you mean. (You can even do
a kind of personality exam by typing your name into the prompt and seeing
what color your browser thinks you are. When I type then This example demonstrates two new facts about JavaScript.
First, notice that the onClick triggers three separate JavaScript statements. You can put as many lines of JavaScript as you want between the onClick’s quotes, although if you put too much in there, the HTML starts to look messy.
Second, notice that you can change the background color of a page by setting window.document.bgColor to the color you desire. To make the background of a page red, you’d type:
window.document.bgColor = 'red';