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
rajbee
6,657 PointsUnderstanding 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
27,930 PointsHi 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