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.

<ul> class="menu">
<li><a href="#" id="1">1. Click me to show first bio.</a></li>
<li><a href="#" id="2">2. Click <em>me</em> to show <em>second</em> bio.</a></li>
<li><a href="#" id="3">3. Click <strong>me to show third</strong> bio.</a></li>
</ul>

<div class="bio" id="1">
Biography for person number one.
</div>
<div class="bio" id="2">
Biography for person number two.
</div>
<div class="bio" id="3">
Biography for person number three.
</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 7 attach our function click_me to the menu.

$(function(){
    /* Hide all bio divs, then show the very first one. */
    $(".bio").hide(); $(".bio:first").show();

    /* Hook the onClick function, any A inside an
        object with class menu (UL in this case) */
  $(".menu A").click(click_me);
});

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?

function click_me(event){

    console.log('clicked');
    /* "this" is DOM element attached by the function */
    console.log('this=' + this);

    /* "event.target" is DOM element receiving the event, can be a child */
    console.log('event.target=' + event.target);

    /* Show the bio selected */
    var s = ".bio[id=" + this.id + "]";
    $(".bio").hide();
    $(s).show();

    /* Silly effect to show the use of $(this). */
    $(this).fadeOut();
    $(this).fadeIn();

};

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.