Section 4a.10. Pay attention to | Head Rush Ajax (Head First)

4a.10. Pay attention to "this "

The first thing we need to do is figure 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:

 div img img imgMouse click A user clicks on the CD cover image, represented by an <img> element, in top5.html. img img

 addToTop5() top5.js The <img> element runs its onClick handler, the addToTop5() function in the top5.js JavaScript file.

 function addToTop5() {   var imgElement   = this;The "this" keyword points   to the <img> element that called addToTop5(), and is available to   any code in addToTop5(). Once this code runs, the imgElement variable points back to   the <img> element node that was clicked on by the user.   // More JavaScript code... }                img

When someone clicks on an image, addToTop5() is run...
```
 addToTop5()                                this 
```
...and addToTop5() uses the "this" keyword...
...and the "this" keyword points back to the image that was clicked on.