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

JavaScript jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 1

Ariel Vainer
Ariel Vainer
7,042 Points
Posted by Ariel Vainer
Ariel Vainer
7,042 Points

Anonymous function & this

Hi everyone. I need help with this terminologies. Could someone explain me more about them? Specially with the anonymous function. I was doing this:

$("#imageGallery a").click(function() {
  event.preventDefault();
  var href = $(this).attr("href")
  console.log(href);
});

On the video, we had to add an "event" inside the parenthesis after function. Is it just for the .preventDefault() to work? Could someone please explain me the steps, like whats going on? It is because of the .click() event?

Thank you!

2 Answers

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

When you click on a link, you trigger an event. That event object that is created contains a lot of information. For example, it contains what was clicked, what time it was clicked, the coordinates, and so on. It has methods like preventDefault and stopPropagation. Try something like this and you can see it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>This</title>
</head>
<body>
<a href="https://teamtreehouse.com/community/anonymous-function-this">
  Anonymous function &amp; this
</a>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$('a').on('click', function(e){
  e.preventDefault();
  console.log(e);
});
</script>
</body>
</html>

That event will eventually cause the url of the link that you clicked to load. You don't really want that for your gallery. So, In your function you capture the event and tell it not do what it is supposed to do (prevent the Default behavior) because you don't want the default behavior of loading a new url to happen.

With this $("#imageGallery a").click(myFunction); you tied that function to all of your image gallery links. When ANY of them are clicked it will run that function. To specifically work with only 1 of those links you can use the $(this) selector. With it, the specific link that was clicked can be referenced within the function.

/* 
Here we select ALL of the links "a" that
are inside of the element with the ID imageGallery. We specify
that if ANY of them are clicked, run this function. */
$("#imageGallery a").click(function(event) {
  /*
  A link was clicked. To stop it from going to a 
  new page we capture the event as "event", and tell 
  it NOT to do it's default behavior */
  event.preventDefault();

  /*
  We might have 20 images in our gallery but we only 
  care about the one that was clicked. To specify that we 
  want to work with the one that was clicked (the one that
  triggered the click event), we use $(this). The line below
  is getting the href attribute of the link that was clicked */
  var href = $(this).attr("href");
  console.log(href);
});

Hopefully that makes sense

Gunhoo Yoon
Gunhoo Yoon
5,027 Points
Gunhoo Yoon
Gunhoo Yoon
5,027 Points 
// I will mark each line and describe what's happening.
1. $("#imageGallery a").click(function(event) {
2.   event.preventDefault();
3    var href = $(this).attr("href")
4.   console.log(href);
5. });

  1. JQuery click method takes FUNCTION as argument and passes event object that has everything you need to know about specific event generated.

  2. Every browser has default event behaviour. This line tells event object to ignore the default behaviour.

  3. There can be multiple DOM element selected, the usage of 'this' will bind each individual instance of DOM element selected by #imageGallery a. So each DOM element's href attribute that has actually been clicked will be stored as href variable.

  4. Log href variable.

Anonymous function is just a function without a name. It means that function is used like an expression not as some sort of stored value like variables.

So technically you don't have to use anonymous function as an argument. You can simply use named function as pass it as argument of click() function. However, you use it because you don't want expression-like function taking up unnecessary name space in your script.

For example, this is possible.

//This is named function.
function forClick(event) {
  event.preventDefault();
  var href = $(this).attr("href")
  console.log(href);
}

//Or

var forClick = function(event) {
  event.preventDefault();
  var href = $(this).attr("href")
  console.log(href);
}

$("#imageGallery a").click(forClick);

Internally click() method will do something like this.

function click(func) {
    //Detect click etc... 
    //Handle browser compatability etc...

    func(event) //Calls given function argument.
}