I run into this issue all the time. Inside a callback function,like a function that response to OnClick, do I use
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>
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.
- 1. Click me to show first bio.
- 2. Click me to show second bio.
- 3. Click me to show third bio.
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
Line 9 attach our function
click_me to the menu.
/* 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?
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:
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
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,
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
you are creating a JQuery object out of, well,
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
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
You can see a working version of this example here.