HTML and CSS Reference
In-Depth Information
EXAMPLE
15.21
<html>
<head><title>Register Multiple Events</title>
<script type="text/javascript">
1
window.onload=function(){
2
var paraHandle = document.getElementById("para1");
var paraHandle2 = document.getElementById("para2");
3
paraHandle.addEventListener('mouseover',highLight, false);
4
paraHandle2.addEventListener('click', function(){
5
this.style.fontSize="x-large"},false);
6
paraHandle2.addEventListener('mouseover', highLight,false);
7
function highLight()
{
8
this.style.backgroundColor ="tan";
this.style.fontFamily ="fantasy";
this.style.fontWeight ="bold";
}
}
</script>
</head>
<body>
9 <p id="para1">
There was an old lady who lived in a shoe.<br />
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 has loaded the inline anonymous function will be called.
2
In the next two lines, JavaScript's
getElementById()
method will return references
to two paragraphs in the HTML document.
3
The
addEventListener()
method takes three arguments, the event that will be reg-
istered for the paragraph, the name of a function,
highLight
, that will be called
when the
mouseover
event is triggered, and a Boolean value of false, indicating the
bubbling is the method of event propagation.
4
Another
addEventListener()
method registers the
click
event for the second para-
graph, the inline function, that when called will dynamically change the font in
the paragraph to extra large.
5
The
this
keyword when used with event handlers references the object on which
the event fired, in this case, the second paragraph.
Continues
