Head Rush Ajax

250

Chapter 4.5

Any time someone clicks on a CD cover image, we need the Top 5 page to

run our addToTop5() function. That way—once we write the code for

addToTop5()—the CD that was clicked on will get added to the Top 5 list.

There are two different ways we can handle this:

Setting up the CD covers

Which option do you think is best? Remember, after you add a CD to the

Top 5 listings, you don’t want anything to happen if someone clicks on that

cover again. Otherwise, you’d be adding a CD to the Top 5 that is already

in the Top 5. Does this make a difference in how you add the onClick

event to the CD cover <img> elements?

brain

power

Add onClick event handlers to every

<img> element in top5.html.

Option 1:

Pros:

Cons:

¸ Easy to do. Just add onClick=”addToTop5();”

to each <img> element in the HTML.

¸ Doesn’t require writing any JavaScript.

˚ If you change or add images to the HTML page, you

have to remember to add the onClick event handler.

Use JavaScript to programmatically add

event handlers to all <img> elements.

Option 2:

Pros:

Cons:

¸ Makes sure all images call addToTop5(), even if

new images are added later.

¸ The application can call the function that adds event

handlers any time it’s needed.

˚ Requires writing code instead of adding onClick

handlers directly to the HTML.

Add CD rankingsCreate JS le Add CD to Top 5

Start over

event handler analysis

developing dom apps

Add onClick event handl