not using second focus: focus(confirmPasswordEvent) just keyup(confirmPasswordEvent) on password element, differences?

Hi Itsik. How are you? I completely understand the confusion behind all of this. I'll try and explain it, though the difference is barely noticeable.

With the .keyup(passwordEvent) = .on('keyup', passwordEvent) - the function, used as a reference (function reference, since it's without parenthesis at the end) will be called only when the particular event (in this case 'keyup') is triggered on an element that is listening to that event. In other words, each time user presses a buttom (but don't release it! - he rather holds it) the passwordEvent function will be called. So just to recap, the event is fireing only when the user presses down the button down on the keyboard and not when he release it.

On other hand, .keydown(passwordEvent) = .on('keyup', passwordEvent) will be triggered only when the user releases the button and not when he presses it. So the difference is the event itself and the conditional that is calling the function used as a reference.

Let's assume the following code:

$('#passwordInput').on('keyup', function({

    if ( $(this).val().length < 8 ) {
        $(this).next('span').show()
    } else {
        $(this).next('span').hide()
    }

}));

It will just show a span with an error if the user's input had less than 8 characters. But, here's the catch! If the user perhaps pressed the button down and held it for as long as a few seconds and let's say the 24 'S' characters were typed (and still counting) in that input field, the actual span will still be there, shown (if he was still holding the button down of course). Why? Because the event wasn't triggered, as user didn't release the button, he was holding it all the time.

By including both of the 'keyup' and 'keydown' events with the same function (with an if statement in this case) will assure that even if the user (for some strange reason - perhaps if he's an employee testing how you think as a programmer) pressed his key and didn't release it for quite a while, he'd like to see that the error disapearing, because after all there's more than 8 characters in that input field.

There's no much of an inpact here as you saw it yourself if you don't include the 'keydown' event, though it's a common way (best practice as developers like to say) to include both of the events. Because I think none will enter their passwords like that (by holding a key until the error disappears).

One way of thinking about it is for the password confirmation input field; as soon as the field values matches (once again just by holding that 's' key on the keyboard and not releasing it) the span will flash at one point (because eventually the user input of both input fields will match) and it will disappear for a really short amount of time and then come back again.

I hope I managed to make it a bit more understandable. I know the example provided isn't the best, though that's the first thing that poped on my mind and it is really related to the video.

Hope that answer your question. Much success in your future carrer

Hello again Itsik. So sorry for my late response; I was going through my daily tasks here on TH.

Uhhm, the focus state is there initially because we wanted to display the span with the text, when the input text field gets the focus state (meaning that the span element is shown when the user clicks inside the textfield). As if we don't provide it, that means that that the span with the text won't be shown unless the user push a button on his/her keyboard.

The 'keyup' and 'keydown' events can be confusing as, as funny as it seams, they still involve one button press. You can think of it this way - say that we want to enter a supermarket and to do so we need to PUSH the door (or in our case push the button down - press it). Now by default (without thinkg about it - doing it subconsciously) when typing in order to press another key on your keyboard you first need to unpress the previous button; or in the example of the door - it's when the door closes, either by you PULLING it back, or on it's own.

In a real life example, if I want to type the 'JS' I'll need to do the following:

• press down ('keydown' event) the letter J on my keyboard
• release ('keyup' event) the same letter J I previously pushed down
• press down ('keydown' event again) the letter S on my keyboard
• release ('keyup' event) the same letter S I previously pushed down on my keyboard

As you can see, even if only 1 button is involved there are 2 events that can respond with a different callbacks. Meaning something can happen when the user presses and releases the button.

Here's a little snippet I threw back, that I think will help you understand the 'keydown' and 'keyup' events more clearly. JSfiddle : https://jsfiddle.net/8vmjnt48/

Try holding a button for a few second and closly watch the text of the span element written in red.

Hope that helps out! If you still have some doubts, please don't hesitate to reply to this thread and I'll try do respond asap. Cheers

thank you for the replay. But, I was asking about the focus function role in this line code: $password.focus(passwordEvent).keyup(passwordEvent).focus(confirmPasswordEvent).keyup(confirmPasswordEvent);

I saw the JQuery documentation. it's mention about keyup (and keydown too): "The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus."

is that why we need the focus function? but without writing it, just the following line the page still run the same.!

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

I just saw the next video and the lecturer said we don't need that focus because we don't need to confirm it until the key is up!

but still I didn't got the JQuery API documentation about keyup: "The keyup event is sent to an element when the user releases a key on the keyboard. It can be attached to any element, but the event is only sent to the element that has the focus".

thank you