HTML and CSS Reference
In-Depth Information
EXPLANATION
1
The
getElementById()
method returns a reference to the paragraph identified on
line 4.
2
The
addEventListener()
method takes three arguments, the event that will be reg-
istered for the paragraph, the name of a function that will be called when the
click
event is triggered, and a Boolean value of false, indicating the bubbling is the
method of event propagation.
3
When the user clicks on the paragraph, the paragraph will be styled using the
style
property of the current object
, this.
Because
this
refers to whatever object was af-
fected by the click, it could be used by more than one event listener.
4
The
p
element is assigned an
id
attribute that will be used to identify the paragraph
in line 1. See the results in Figures 15.38 and 15.39.
Figure 15.38
Before clicking on the paragraph.
Figure 15.39
After clicking on the paragraph.
The W3C model allows you add as many event listeners as you want to an element. In
Example 15.21, the second paragraph is registered with two event handlers. If the mouse is
rolled over the element, the text is highlighted. If the click event occurs, the font is enlarged.
