Understanding this, $(this), and event in a JQuery callback function

I run into this issue all the time. Inside a callback function,
like a function that response to OnClick, do I use this,
$(this), or event to get to what I need?

Let’s use a real example to demostrate what to do: A web page of
biography for a website uses a side menu to select one of several bios
to display in the main area. Doing this in JQuery means that we want
to hook a handler to the click events of each of the <A> element
in the menu. When a menu item is clicked, we will display the
corresponding biography enclosed in a <DIV>

HTML

Here’s the HTML for the menu area and the biography area.
I am using ID’s to distinguish each biography.

Line 1 gives the menu a class of MENU so that we can
easily find it in JQuery.
Line 2 to 4 provide three menu items for the user. Notice
that at line 3 and 4, there are extra styling for the menu text.

Line 7 and on are three DIV’s with ID corresponding to each
of the menu items. Each DIV has a class of BIO, again for
easy selection by JQuery.

view source

print?

01<ul> class="menu">

02<li><a href="#" id="1">1. Click me to show first bio.</a></li>

03<li><a href="#" id="2">2. Click <em>me</em> to show <em>second</em> bio.</a></li>

04<li><a href="#" id="3">3. Click <strong>me to show third</strong> bio.</a></li>

05</ul>

06  

07<div class="bio" id="1">

08Biography for person number one.

09</div>

10<div class="bio" id="2">

11Biography for person number two.

12</div>

13<div class="bio" id="3">

14Biography for person number three.

15</div>

JQuery: Initialization

The following initialization code first hides all biography divs on load,
and then show just the first one by default. Notice how we use the
:first selector to make selecting the first matching
DIV easy.

Line 9 attach our function click_me to the menu.

view source

print?

01$(function(){

02  

03    /* Hide all bio divs, then show the very first one. */

04    $(".bio").hide();

05    $(".bio:first").show();

06  

07    /* Hook the onClick function, any A inside an object with

08       class menu (UL in this case) */

09    $(".menu A").click(click_me);

10  

11});

JQuery Handler Function

Here is the handler function that we hooked to the anchors in
the menu. Can you guess what’s the console log output would be?

view source

print?

01function click_me(event){

02  

03    console.log('clicked');

04    /* "this" is DOM element attached by the function */

05    console.log('this=' + this);

06  

07    /* "event.target" is DOM element receiving the event, can be a child */

08    console.log('event.target=' + event.target);

09  

10    /* Show the bio selected */

11    var s = ".bio[id=" + this.id + "]";

12    $(".bio").hide();

13    $(s).show();

14  

15    /* Silly effect to show the use of $(this). */

16    $(this).fadeOut();

17    $(this).fadeIn();

18  

19};

Here is the explanation:
1. this inside a JQuery event handler is the
DOM element that has the handler attached. This (sic) this is
not necessarily the A link itself. If we have attached the
handler to something else, like the containing DIV, we will
get the DIV DOM element doesn’t matter which inside elements
of the DIV we clicked. In this case we have attached the click_me
function to the anchors (A) themselves, so we are safe
to know that this.id will give us the ID specified
within our A tags.

2. The standard argument passed to the function, event
is the eventObject;
It is a JQuery structure the contains many useful attribute regarding
the (click) event. Specifically event.target is the DOM element received the click event.
Note that it will be “the DOM element that issued the event. This can be the element that registered for the event or a child of it”.

For example, in menu item two, if you clicked on the word “me”, it will
be the span element, not the A element.

3. Finally, when you turn this into $(this),
you are creating a JQuery object out of, well, this.
Turning a DOM element (the A in this case) into a JQuery object
allows you to use all the JQuery functions on it. We do not really
need to do that here, but just as a demonstration, we use $(this)
to fade the menu item out and in. We need to turn the A into a
JQuery object so that we can call the JQuery fadeOut
and fadeIn functions.

You can see a working version of this example here.