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

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points
Posted by Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 Points

I don't follow the logic of how the 'event' parameter gets passed into the anonymous function.

My code works I just don't understand why. 

$("#imageGallery a").click(function(event){
  event.preventDefault();
  var href = $(this).attr("href");
  console.log(href);  
});
Jared Bothwell
Jared Bothwell
7,031 Points
Jared Bothwell
Jared Bothwell
7,031 Points

I'm using Chrome and the event.preventDefault(); works even if you don't add event into the function parameter.

3 Answers

rdaniels
rdaniels
27,258 Points
rdaniels
rdaniels
27,258 Points

Event handlers are defined using handler elements. A handler specifies what event it is listening for using the event attribute. The handler contains script that is executed when an event flows to the object the handler is attached to and if that event matches all of the criteria specified by the handler.

The most basic handler specifies the event to listen for and an action to take when the handler fires. This action can be specified either using an action attribute or by specifying the script as a child of the handler element. If both are specified, the attribute wins. In both cases the JavaScript body is compiled just before execution; code that does not depend on the context of the event should be factored into normal Javascript file. (Note that there is a possibility that this may change in the future.)

Handlers are attached to the bound element, and they are registered by default for bubbling events. This means that

<handler event="click" action="foo()"/> is analogous to onclick="foo()" defined on the bound element.

The phase attribute specifies the phase of event flow that the handler is registered for. The default value is bubbling, which means that the event handler will fire during the bubbling phase. The other possible values are target, which means the handler will only fire if event.originalTarget is the same as the target to which the handler is attached, and capturing, which indicates the handler should fire during the capturing phase of event flow.

referenced from MDN

Vedran Brnjetiฤ‡
Vedran Brnjetiฤ‡
6,004 Points
Vedran Brnjetiฤ‡
Vedran Brnjetiฤ‡
6,004 Points

For that I recommend reading on this: http://javascript.info/tutorial/obtaining-event-object

It is passed right there where you put it in brackets. The "event" object is always available as it is a global variable.

Miguel Palau
Miguel Palau
24,176 Points
Miguel Palau
Miguel Palau
24,176 Points

What you can do to understand it is to run the code in the panel inside of your developer tools in chrome.

Put a pause in the code inside the function.

Then go to the console and type

event;

It should return everything that event is so you can inspect it and understand what it's doing.

It also helps to dive in the jQuery non-minified js and also look in there to know how the function really works.