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

HTML jQuery Basics (2014) Creating a Password Confirmation Form Perfect

William Bruntrager
William Bruntrager
11,473 Points
Posted by William Bruntrager
William Bruntrager
11,473 Points

Chaining events vs. separate lines

In the code challenge, we have:

$password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(enableSubmitEvent);

is this single line equivalent to:

$password.focus(passwordEvent);
$password.keyup(passwordEvent);
$password.keyup(confirmPasswordEvent);
$password.keyup(enableSubmitEvent);

In the prior JavaScript course, we learned a technique for allowing an event to trigger more than one action, using addEventListener. Can you do this in jQuery just by chaining the events together, as seen in this unit?

1 Answer

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

"Can you do this in jQuery just by chaining the events together, as seen in this unit?".

You are correct. By chaining all those methods together, they get triggered by $password.

If you split them into individual lines, they'll also work but you are not taking advantage of jquery. Your code is longer and it takes longer to execute (the browser needs to find the element for each line while by chaining the methods it only needs to find it once.)

EDIT: As Chris pointed out this is not correct. Please see his explanation below.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

If you split them into individual lines, they'll also work but you are not taking advantage of jquery. Your code is longer and it takes longer to execute (the browser needs to find the element for each line while by chaining the methods it only needs to find it once.)

This isn't true, above William Bruntrager has $password which means he's declared that variable and stored the result of the jQuery selector away as the value meaning the object can be referenced without needing the browser to look for it again.

In turn either chaining or separating each method call will result in the same performance as the browser will interpret the code the same way.

You may be asking why?

Whenever you call a method in jQuery that deals with the DOM object it returns the same jQuery object assigned from the prototype which means you get the same result as separating the methods out.

Still don't believe that either are faster?

I wrote a quick test to show the results, when you think about how fast computers and browsers process data 4.13% compared to 3.77% is not different.

http://jsperf.com/jquery-chaining-vs-separation

NOTE: I performed this test in Chrome, other browsers retain the same result with difference percentages.

William Bruntrager
William Bruntrager
11,473 Points
William Bruntrager
William Bruntrager
11,473 Points

Thanks to both of you.

I had in my mind that you have to be calling a method on some object, but I really didn't understand what object we were calling it on in this case. The key thing to know is that, as Chris says, the event handler methods (and many other (all?) jQuery methods) return the DOM object after they are called, enabling further methods to be called on the same object.

This is probably something I should have checked in the console, but honestly, I still find the console somewhat intimidating :).

Alex Morask
Alex Morask
6,430 Points
Alex Morask
Alex Morask
6,430 Points

Hey Will,

I'm definitely a jQuery newbie, but I'm finding the console to be tremendously helpful in these situations; especially when determining what's getting returned in your chains. For example, just throwing $password.focus(passwordEvent) into the console will return the <input id="password"> object (your password). I was having trouble understanding what gets returned in an eventHandler chain until I tried that. Just thought I'd toss that in here.

Cheers.