Section 4a.7. Running addOnClickHandlers() | Head Rush Ajax (Head First)

4a.7. Running addOnClickHandlers()

We need to make sure that these event handlers are set up as soon as the page loads. Fortunately for us, the <body> element has an event handler called onLoad() . We can use that to run a JavaScript function any time the page loads, which is just what we want.

Make this change to your top5.html markup:

Be sure and make the changes on the last few pages to top5.js, also.

     <html>      <head>       <title>Top 5 CD Recommendations</title>       <link rel="stylesheet" type="text/css"            href="top5.css" />       <script type="text/javascript" src="/books/2/850/1/html/2/top5.js" />      </head>      <body Any function specified in the onLoad() event handler      will run every time the HTML page is loaded in a browser.onLoad="addOnClickHandlers();">     <div > addOnClickHandlers() will run when the page loads,      and then every time someone clicks on a CD cover, addToTop5() will run.

4a.7.1. Frequently Asked Questions?

Q:	onClick, onChange, and now onLoad... where are all these event handlers coming from? You seem to be pulling them out of thin air!
A:	Don't worry if you're not familiar with all of these event handlers... you can look them up in any good JavaScript reference. Now that you're starting to work with JavaScript more, you'll start to learn about the different event handlers, and what each handler does. For now, just trust us... and be on the lookout for Head First JavaScript, where you'll get the full scoop on event handlers.
Q:	Isn't there an addEventHandler() method that would be better than working with the onclick property directly?
A:	addEventHandler() is a method that you can use to add event handlers to elements, and works in a similar way to the onclick property. However, addEventHandler() isn't supported on Internet Explorer, while the onclick property works on all modern browsers. Need we say more? By the way, the property is "onclick", not "onClick". If you use anything but lowercase letters, you'll get an error, so use only lowercase when you're typing event handler properties like this.