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” />
Search WWH ::

Custom Search