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 Password Confirmation Form Perfect

rajbee
rajbee
6,657 Points
Posted by rajbee
rajbee
6,657 Points

Understanding this - Chaining event handler methods in jquery ?

How does the code below work in terms of function calls and values returned by functions ? What type of object is returned by focus, keyup etc ? Please explain step by step.

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

Thanks.

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Raj,

The .focus() is known as an event handler as is the .keyup(). This is because these detect an event from the viewer, from the two examples you have provided the focus event is fired when the element gains focus, the keyup event fires when the user releases a key on the keyboard.

More information on .focus()

More information on .keyup()

The object is the $password variable you have created, this is because it refers to the password input element you have created. This would now be know as a jQuery object.

This is a great article from smashing magazine on the subject.

What you are putting between the parenthesis of these event handlers are functions you have created yourself.

So in essence what is happening, you have selected and element and stored it as a variable $password,

When $password comes into focus you are firing the passwordEvent function.

When a user is typing i.e. firing the keyup event you are firing the passwordEvent, confirmPasswordEvent and enableSubmitEvent.

I hope this helps in some way,

Craig