Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lloyd Lee
3,796 PointsWhy do we add "event" to the anonymous function?
I don't quite understand why we change from this:
$('#imageGallery a').click(function(){
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
//- show overlay
//- update overlay with image linked in the link
//- get child's alt attr and set caption
});
to this:
$('#imageGallery a').click(function(event){
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
//- show overlay
//- update overlay with image linked in the link
//- get child's alt attr and set caption
});
Why don't we keep this as an anonymous function?
6 Answers
Joseph Turnquist
14,516 PointsLloyd Lee,
The function is still anonymous. The change that was made simply passes "event" into the anonymous function as a parameter, so that the function can use it (in this case, with preventDefault).
Michael Jurgensen
8,341 PointsHi Llyod,
The function is still an anonymous function. However you need to pass in an event when using preventDefault otherwise it will not work. Consider the following example:
<a href="index.html" >Here</a>
$("a").click(function(event)
{
event.preventDefault();
});
This will prevent the browser from using the default behavior of a link. If you click the link it will not go to another page. However if you forget to add an event to the function:
$("a").click(function()
{
event.preventDefault();
});
The link will work normally. So if you want to prevent links from working pass in an event and use the preventDefault method.
Lloyd Lee
3,796 PointsThis is the code I have right now:
$('#imageGallery a').click(function(){
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
}
and it is preventing the links from working normally - as in they show up as links, but when clicked nothing happens. In the console it shows - images/referral_machine.png
So, isn't that still working properly even though I've excluded the "event" parameter?
Michael Jurgensen
8,341 PointsStrange in my browser it will only work if I add the event argument.
M Fen
9,858 PointsThis was a clear explanation and made the most sense. Thanks for sharing.
Steven Walters
10,573 Pointsdoing a
console.log(event);
with and without the argument provides some interesting results.
--StevenKW
Jeremy Woodbridge
25,278 PointsTo put it simple the "event" is the parameter of the function. Without this the function won't execute when needed. In this case we are trying to prevent the action of going to the link for the image as the browser by default wants to.
When the function takes in the event parameter the following instructions are event.prevetDefault(); which is a method to prevent the browser from opening the link.
Kirby Walls
6,508 PointsI was wondering about this too. Just like you said, the function works for me if I don't include an "event" parameter for the anonymous function. I think this is because the browser makes the "event" object available globally as the window.event property, so the function can still access it.
Someone on StackOverflow also says that jQuery always passes the event as the first argument to an event handler method.
People say it's safer to include the event parameter, though, since not all browsers make that object available.
Lloyd Lee
3,796 PointsWhen a link nested within '''ul id="imageGallery" ''', yes. In both instances.
(Sorry, not too familiar with Markdown just yet...)
Joseph Turnquist
14,516 PointsLloyd,
Just so you know, you posted this as a second answer :)
See my response in the comments for the answer I posted.
Lloyd Lee
3,796 PointsHaha, yea I know...I'm not doing too well with responding either..
Lloyd Lee
3,796 PointsLloyd Lee
3,796 PointsJoseph Turnquist,
Thanks for the response. But I'm still a little confused as to why we include "event". The function works without it.
Joseph Turnquist
14,516 PointsJoseph Turnquist
14,516 PointsJust to clarify, when a link with the ID of imageGallery is clicked, the browser doesn't follow it and instead logs the href attribute to the console, correct?
Joseph Turnquist
14,516 PointsJoseph Turnquist
14,516 PointsAfter playing around with this for a bit, I noticed that regardless of whether or not the event object is passed to the .click() method, it appears to be available. I'm not entirely sure as to why that is, but it seems as though jQuery automatically provides the event object.
Regardless, it should be included as a parameter, so as to make it obvious as to where the event object is coming from. Also, I've seen lots of people use "e" as the reference for the event object, so it would also be worthwhile to be explicit in what "event" actually is.
Lloyd Lee
3,796 PointsLloyd Lee
3,796 PointsAh okay, that's what I was looking for. So this must be an exception? (one of maybe a few or something? - however, best practice would be to include it)
Joseph Turnquist
14,516 PointsJoseph Turnquist
14,516 PointsIt appears to be unique to the event object, but I'm not 100%. It would definitely be best practice to include it, even if it is optional, as it makes your code easier to read.