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

Could somebody explain the use of the "event" parameter used in the function?

I'm trying to understand how the "event" parameter ties into the function

$("#imageGallery a").click(function(event) {
  event.preventDefault();
});

I understand that its supposed to stop the default behaviour of the links, inside the image gallery. But I don't understand how that happens

3 Answers

Steven Parker
Steven Parker
231,275 Points

When an event handler function is called (for this example, that happens when the mouse button is clicked), it is given an event object as a parameter.

One of the methods of an event object is preventDefault, which cancels the normal processing of the event.

Still having a little trouble with this, only because I'm not quite getting how the parameter is actually passed in here.

In C++, at least, when you define a function initially you add possible arguments to that function. So:

event.doSomething();
}

Would be using event as a placeholder, and whenever you actually called that function again you'd place the actual event within the parentheses to look something like this:

function(button.click)

Then the code would run as:

button.click.doSomething();

In this case I'm not sure how you're defining that the click event be used as the event within the function's arguments. Does any function added in the args of a click event automatically fill in a single given parameter with the click event itself? What if you give that anonymous function two arguments, so it looks like this:

function(event, thing)

What populates in the second parameter? Or does that not work in this case? Are there instances when passing two arguments into an anonymous function will work? How is that defined?

Sorry if I'm not making sense, I appreciate your help.

EDIT: So I just tested out my last example, and console.log(thing) returns "undefined", so it does look like passing a second argument in doesn't work for a click event. Additionally I was able to confirm it's not keyword-based by changing "function(event)" to "function(test)" and running "console.log(test)" still returned the click event. So I was able to figure some of this out, but it's still odd to me how the argument is passed in. Is it just sort of:

"When using the .click event of an element, if you pass in an anonymous function as the first argument, you can include up to one argument. If you do, that argument will be populated by the data from the click event."

?

Kevin Korte
Kevin Korte
28,149 Points

Hi Kristian,

Steven is correct. I'll just add, if you want to see all of the data you can get from an event (which is a lot btw), you can console.log(event) in your click function, and all the properties of the event will be there, including preventDefault()

I'm just having trouble understanding the syntax.

the click is the event

the function is what happens when the event is fired

but the "event" parameter just looks separated from the click itself.

how does the "event" parameter link to the click event?

thanks in advance

Kevin Korte
Kevin Korte
28,149 Points

Click is a jquery event handler. When the browsers receives a click event on a target, in this case "#imageGallery a", it calls the event handler, which is our anonymous function. Event data is capture by the browser, and you can decide to pass the event object into the function. In this example, you passed it as event, it's often common to see it passed as just simply e, in which case it becomes e.preventDefault().

The event data is there, whether you capture it or not. It's just something handled by the javascript executed in the browser.

Does that make sense?

Thank you for your response, Kevin! I have a better grasp of this concept