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
Arturo Goicochea
8,077 PointsWhat is "event"?
what populates the "event" variable used in:
$("#imageGallery a").click(function(event){ event.preventDefault() });
Does jQuery intelligently populate it with the "click" event?
9 Answers
Colin Bell
29,679 PointsEvent in .click(function(event){ event.preventDefault() }) is the object being targeted.
So in your example, all links nested inside of the #imageGallery are being targeted. When an a element is clicked on, its default behavior is going to be prevented.
So if the Href of a link is "#id", the default behavior is to jump to the section of the page where #id is located. This will prevent that.
It's very similar to using $(this):
$("#imageGallery a").click(function() {
$(this).preventDefault();
});
Please note that it is not exactly the same. See this StackOverflow answer for the difference between $(this) and event.target.
Chris Shaw
26,676 PointsHi Arturo,
The first parameter of all jQuery events is an extended version of the window.event object, the customised event object offers complete cross compatibility to avoid unexpected results in say IE 7/8 which use a completely different event implementation to IE9+ and modern browsers.
If you were to console.dir out the value of event compared to window.event you will see the differences.
Hope that helps.
Marko Paasila
6,313 PointsAfter reading the 2 conversations about this "event" parameter, I am still struggling to understand it.
Where exactly is the event object defined? Is it an object or a method within an object?
Is it defined inside some method in the jQuery libraries?
Or should I just forget the reasoning and try to memorize the fact that it has to be used?
Chris Shaw
26,676 PointsHi Marko Paasila,
As explained above, jQuery builds the event object from the already defined window.event object which the browser constructs every time say, a click is triggered on the page. This object is normalized by jQuery and passed to the function as an argument which we can access via the first parameter.
It's best to note that this object is different between IE8 and modern browsers along with the event model itself as it uses an older version of the ECMAScript 5 implementation, as explained, jQuery fixes this by creating a common object for all browsers and a consistent event model.
You would be able to see the clear difference between what jQuery gives you in the callback function compared to the browser by using the below code and comparing the results side-by-side in the browser developer tools.
$('body').on('click', function(event) {
// event = jQuery modified object
// window.event = Browser created object
console.dir(event, window.event);
});
Hope that helps.
Arturo Goicochea
8,077 PointsHey Colin, thanks for taking the time to help me here!
I understand it works like you said. The tiny detail I want to come to grasps with is how jQuery knows event = the a? Because we've selected the "a" already, but what if we used a function with more parameters? That's why I wonder if "event" is something like a jQuery object or something special, where it knows that it should look for an event previously specified to autocomplete it? Don't know if this makes sense....
Chris Shaw
26,676 PointsjQuery doesn't assume anything, all it does is wrap an event object around the browsers built in event model. Anytime you bind an event using jQuery, for instance in IE9+ you're hooking into an method called addEventListener which does the following.
- Scopes the given anonymous function to the element the event is bound to, accessible via
this - Passes the
eventobject as the first parameter
For example, the below is examples are exactly the same.
$('#someElement').on('click', function(event) {
alert('Hello from jQuery');
});
document.querySelector('#someElement').addEventListener('click', function(event) {
alert('Hello from addEventListener');
}, true);
Demo: http://jsfiddle.net/h31bs1m8/1/
You can find more information about how the event object works at MDN.
Also to clarify, the below isn't valid as this refers to the Element object which is completely different and has no similarities.
$(this).preventDefault(); // Incorrect to prevent the default action
event.preventDefault(); // Correct as only the "event" object contains the "preventDefault" method
Arturo Goicochea
8,077 PointsThanks everyone!
a sfpl
5,691 PointsIs event a keyword or reserved word in jQuery then?
Chris Shaw
26,676 PointsNo, jQuery is just JavaScript therefore it can't create it's own keywords. The event object is standard in all browsers and can be accessed globally via the window object as I mentioned above.
kevinardo
Treehouse Project ReviewerI tried with a random argument in the anonymous function just to test and it still works...
$('#imageGallery a').click(function(randomArgument) {
randomArgument.preventDefault();
});
Why is this? I thought that preventDefault was a method of the event object? Is it a default method of every argument passed on to an anonymous functions argument within the click method? Or does an argument passed in become an event object?
Chris Shaw
26,676 PointsHi kevinpixelkojan,
The first parameter for all jQuery events is the window.event object, rather than needing to determine if we're in a browser such as IE8 or Chrome; jQuery will manipulate and normalize the event object which allows us to call the argument it passes through whatever we like in the callback function.
kevinardo
Treehouse Project ReviewerThx alot Chris Upjohn !
Marko Paasila
6,313 PointsI read that 5 times and tried the code. Thanks! Just let me rephrase it to see if I understood:
The
window.eventis an object which isn't consistent between browsersThe browser constructs it every time some action happens, so it always contains the latest happening (which seems to consist of quite many key:value pairs)
jQuery normalizes the differences between browsers and provides it as the
eventobject, which can be passed as an argument (or use its own methods directly)the
eventseems to exist only for a short time and the scope of the object is the current element
There must be some inner workings which I just can't understant with my current knowledge.
james rochabrun
Courses Plus Student 22,726 PointsAny event names can be used for the events argument. jQuery will pass through the browser's standard JavaScript event types, calling the handler function when the browser generates events due to user actions such as click. In addition, the .trigger() method can trigger both standard browser event names and custom event names to call attached handlers. Event names should only contain alphanumerics, underscore, and colon chraracters.
Arturo Goicochea
8,077 PointsArturo Goicochea
8,077 PointsWhat about the event in: function(event) in
$("#imageGallery a").click(function(event){ event.preventDefault() });? :)Colin Bell
29,679 PointsColin Bell
29,679 PointsI apologize for not being clearer.
So for:
The event parameter is just pointing back to the targeted element. In this case, any a nested inside of #imageGallery can be the event of the function. event is saying that the specific a that is clicked inside of the #imageGallery should have its default prevented.
I hope that was a better explanation.