Head Rush Ajax

258

Chapter 4.5

The rst thing we need to do is gure out which <img> was clicked on, so you can

add the right CD cover to the “top5” <div>. JavaScript lets you know what part of

the DOM tree called your function through a special keyword named this.

Take a look and see how the this keyword works:

Pay attention to “this”

img

img

img

img

img

div

top5.js

addToTop5()

A user clicks on the

CD cover image,

represented by an <img>

element, in top5.html.

The <img> element runs

its onClick handler, the

addToTop5() function in

the top5.js JavaScript le.

2

The “this” keyword points

to the <img> element

that called addToTop5(),

and is available to any

code in addToTop5().

function addToTop5() {

var imgElement = this;

// More JavaScript code...

}

3

Once this code runs, the imgElement

variable points back to the <img> element

node that was clicked on by the user.

img

Mouse click

1

the “this” keyword