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!

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 Perform: Part 1

Aaron Selonke
Aaron Selonke
10,323 Points

How to chain event handlers

Trying to understand why the event handlers are chained up that way. Are these two blocks of code exactly the same?


3 Answers

Both blocks of code will give you the same result, but in an effort to keep code DRY (don't repeat yourself) you would write it the chained way.

Are you not repeating yourself when you called and executed the passwordEvent function twice in the same statement. When I followed the jQuery API documentation before watching the video I obtained this solution that I believe works a bit better. I was very surprised that Andrew Chalkley skipped going into the keyUp() documentation. I always try the perform step before watching the video because Andrew taught the importance of using the jQuery API documentation and he gave links to the new methods needed in the Teacher's Notes below.

//Hide hints
$("form span").hide();

//When event happens on password input
$("#password").focus(function () {
  $(this).keyup(function (){
    //Find out if password is valid
    if ( $(this).val().length > 8) {

      //Hide hint if valid
      } else {
      //else show hint

In this solution, within the focus binding, You are calling an anonymous function. Inside is a binding of the keyup event that calls another (different) anonymous function after the field is focused. Instead of calling and executing the same function statements twice on keyup, you are trickling down to a single anonymous function inside the keyup event. I decided to try and explain what I was doing in case other students want to follow along. If I made any mistakes please correct me on that.

Hi William,

The passwordEvent function isn't being called yet in the code posted in the question. The code sets up both a focus and a keyup handler and a reference to the passwordEvent function is passed in as an argument. If the element either receives focus OR there's a keyup event for that element then the passwordEvent function will be called and executed in response to either of those events.

Your code is doing something different from this.

Your code first attaches a focus handler to the element and that's it. The anonymous function passed in will run as soon as the element receives focus. When the element does receive focus then a keyup handler will be attached to the element. The problem is that your code will attach a keyup handler every time the element receives focus. This means the code to check the password could be run multiple times in response to a single keyup event.

Thanks for letting me know. I was wondering why the other way was preferred. You see a similar process, to what I did, in the jQuery API documentation for the keyup keyboard event.