HTML and CSS Reference
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.
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
3. Directly above the init() function, insert the following code as shown in
/* Run the init() function when the browser loads the page */
window.onload = init;
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” />