HTML and CSS Reference
In-Depth Information
Event Handler Properties
• To run a function when the page is initially loaded by the browser, use the statement
window.onload =
function
;
where
function
is the name of the function to be run.
• To run a function in response to a mouse click, use
object
.onclick =
function
;
where
object
is the document object being clicked by the user.
• To reference the object that initiated the event, use the
this
keyword.
Because Rebecca wants you to put as much of the JavaScript coding as possible into
your JavaScript files, you'll replace the event handler you added to the
<body>
tag in the
HTML file with a JavaScript command to accomplish the same thing.
To run a function when the page is loaded by a browser:
◗
1.
Return to the
hanjie.htm
file in your text editor and
remove
the event handler
attribute
onload = “init()”
from the opening
<body>
tag.
◗
2.
Save your changes to the file and then return to the
hanjie.js
file in your
text editor.
◗
3.
Directly above the init() function, insert the following code as shown in
Figure 13-9:
/* Run the init() function when the browser loads the page */
window.onload = init;
Figure 13-9
applying the onload event handler as an object property
◗
4.
Save your changes to the file, and then reload
hanjie.htm
in your Web browser.
Verify that the page still displays the contents of the first puzzle.
Applying the
onclick
Event Handler
At the top of the page, Rebecca has placed the following HTML code for the three but-
tons used to load each of the three puzzles:
<input type=”button” class=”puzzles” id=”puzzle1” value=”Puzzle 1” />
<input type=”button” class=”puzzles” id=”puzzle2” value=”Puzzle 2” />
<input type=”button” class=”puzzles” id=”puzzle3” value=”Puzzle 3” />
