HTML and CSS Reference
In-Depth Information
EXAMPLE 15.22 ( CONTINUED )
She had so many children, she
didn't know what to do.</p
10 <p id="para2">She gave them some broth,<br />
without any bread,<br />
Whipped them all soundly <br />
and sent them to bed.
</p>
</body>
</html>
EXPLANATION
1
When the page loads, this anonymous function is activated. It will be used to
change the style of two paragraphs.
2
The document.getElementById() method returns a reference to the first paragraph,
and in the next line it returns a reference to the second paragraph.
3
The addEventListener() method is waiting for a mouseover event to occur on the
first paragraph, at which time it will call the highLight() function. The Boolean
false flag indicates that event bubbling is turned on.
4
The addEventListener() method is waiting for a click event to occur on the second
paragraph, at which time it will call the inline anonymous function that will en-
large the font. The Boolean false flag indicates that event bubbling is turned on.
5
The addEventListener() method is waiting for a mouseover event to occur on the
second paragraph, at which time it will call the highLight() function that will
cause the text in the paragraph to be highlighted in a tan color. The Boolean false
flag indicates that event bubbling is turned on.
6
The event listener that was added on line 3 is now removed with the removeEvent-
Listener() method. When the user moves the mouse over the first paragraph, it will no
longer be highlighted (see Figure 15.44).
7
This is a function defined within a function. This function is on standby waiting
for an event to be fired.
8
The JavaScript this keyword refers to the HTML element on which the event was
fired. If it was fired on reference to a p element, then it refers to a paragraph. The
style property will be used with CSS properties to highlight the text when the
event occurs.
9
The first paragraph has a unique id, para1 , with which to identify it in the Java-
Script program.
10
The second paragraph has a unique id, para2 , with which to identify it in the Java-
Script program.
Search WWH ::




Custom Search